Shumoku 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, parser, layout, themes) plus the HTML renderer, so most apps only need this one dependency.

Install

npm install shumoku

Quick start

import { YamlParser, renderGraphToHtml } from 'shumoku'

const { graph } = new YamlParser().parse(`
name: Edge
nodes:
  - { id: rt-01, type: router, vendor: yamaha }
  - { id: sw-01, type: l3-switch }
links:
  - from: { node: rt-01, port: lan1 }
    to:   { node: sw-01, port: ge-0/0/0 }
    bandwidth: 10G
`)

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

What you get

  • Everything in @shumoku/coreYamlParser, HierarchicalParser, computeNetworkLayout, models, lightTheme / darkTheme, the plugin kit, and plugin types.
  • HTML renderingrenderGraphToHtml, renderHtml, hierarchical variants, initInteractive, and the INTERACTIVE_IIFE bundle for embedding.
  • Legacy SVG access — the synchronous svg.render(graph, layout) namespace retained for LayoutResult compatibility. Prefer the dedicated canonical SVG API below for new code.

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 [email protected].

Reference