Getting Started
Shumoku のインストールと最初のネットワーク図を作成
Shumoku とは
Shumoku は Markdown でネットワーク構成図を作成するためのライブラリです。
- YAML でネットワークを定義 → SVG/HTML/PNG を生成
- 900 以上のベンダーアイコン（Yamaha, Aruba, AWS, Juniper）
- インタラクティブな HTML 出力（パン/ズーム、ツールチップ）
- NetBox や独自 API との連携
Installation
npm install shumokuyarn add shumokupnpm add shumokubun add shumokuQuick Start
1. YAML でネットワークを定義
name: "My Network"
nodes:
- id: router
label: "Core Router"
type: router
- id: switch
label: "Main Switch"
type: switch
- id: server
label: "Web Server"
type: server
links:
- from: router
to: switch
standard: 10GBASE-T
- from: switch
to: server
standard: 1000BASE-T2. CLI でレンダリング
# SVG 出力
npx @shumoku/cli render network.yaml -o diagram.svg
# インタラクティブ HTML 出力
npx @shumoku/cli render network.yaml -f html -o diagram.html
# PNG 出力
npx @shumoku/cli render network.yaml -f png -o diagram.png3. ライブラリとして使う
import { YamlParser, renderGraphToHtml } from 'shumoku'
// parse() は { graph, warnings } を返す
const { graph } = new YamlParser().parse(yamlString)
// インタラクティブな HTML を生成（パン/ズーム、ツールチップ）
const html = await renderGraphToHtml(graph, { title: 'My Network' })PNG が必要な場合は @shumoku/renderer-png を使います（Node.js のみ）：
import { renderGraphToPng } from '@shumoku/renderer-png'
const png = await renderGraphToPng(graph, { scale: 2 })4. ベンダーアイコンを使う
nodes:
- id: router
label: "RTX3510"
type: router
vendor: yamaha
model: rtx3510