Shumoku Docs

ドキュメントを検索

共通文書と現行公開版

検索を読み込み中…

English

@shumoku packages

ライブラリ

TypeScriptまたは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].

リファレンス