Docs

Search documentation

Shared docs and current release

Loading search…

日本語

@shumoku packages

Library

Define topologies and render them from TypeScript or YAML.

npm version

The all-in-one package for Shumoku — network topology visualization for Markdown and the web. Re-exports @shumoku/core (models, YAML reader, drawing engine, themes) plus the HTML and SVG renderers (PNG is separate: @shumoku/renderer-png), so most apps only need this one dependency.

Install

npm install shumoku

Quick start

import { readNetworkModel, renderGraphToHtml, toNetworkGraph } from 'shumoku'

const graph = toNetworkGraph(
  readNetworkModel(`
name: Edge
nodes:
  - { id: rt-01, type: router, product: Yamaha }
  - { id: sw-01, type: l3-switch }
links:
  - endpoints: [{ node: rt-01, port: lan1 }, { node: sw-01, port: ge-0/0/0 }]
    speed: 10G
`),
)

// Interactive HTML (pan / zoom / tooltips)
const html = await renderGraphToHtml(graph, { title: 'Edge', toolbar: true })

What you get

  • Everything in @shumoku/core — readNetworkModel, toNetworkGraph, drawNetwork, layoutDrawing, models, lightTheme / darkTheme, the plugin kit, and plugin types.
  • HTML rendering — renderGraphToHtml, renderHtml, renderSceneHtml, initInteractive, and the INTERACTIVE_IIFE bundle for embedding.
  • SVG rendering — renderNetworkSvg, renderSceneSvg, drawNetworkScene and renderGraphToSvg.

Need standalone SVG or PNG output? Depend on the dedicated renderers directly:

import { renderGraphToSvg } from '@shumoku/renderer-svg'
import { renderGraphToPng } from '@shumoku/renderer-png' // Node.js only

const svg = await renderGraphToSvg(graph)
const png = await renderGraphToPng(graph, { scale: 2 })

License

AGPL-3.0-only. For commercial licensing, contact contact@shumoku.dev.

Reference