ShumokuShumoku

Getting Started

Shumoku のインストールと最初のネットワーク図を作成

Shumoku とは

Shumoku は Markdown でネットワーク構成図を作成するためのライブラリです。

  • YAML でネットワークを定義 → SVG/HTML/PNG を生成
  • 900 以上のベンダーアイコン（Yamaha, Aruba, AWS, Juniper）
  • インタラクティブな HTML 出力（パン/ズーム、ツールチップ）
  • NetBox や独自 API との連携

Installation

npm install shumoku
yarn add shumoku
pnpm add shumoku
bun add shumoku

Quick Start

1. YAML でネットワークを定義

network.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
    bandwidth: 10G

  - from: switch
    to: server
    bandwidth: 1G

2. CLI でレンダリング

# SVG 出力
npx shumoku render network.yaml -o diagram.svg

# インタラクティブ HTML 出力
npx shumoku render network.yaml -f html -o diagram.html

# PNG 出力
npx shumoku render network.yaml -f png -o diagram.png

3. ベンダーアイコンを使う

nodes:
  - id: router
    label: "RTX3510"
    type: router
    vendor: yamaha
    model: rtx3510

Next Steps

基本的な図の作成

ノード、リンク、ラベルの基本

グループで整理

サブグラフでデバイスをグループ化

スタイルとテーマ

見た目のカスタマイズ

Playground

ブラウザで試す

基本的な図の作成

ノード、リンク、ラベルの基本的な使い方

目次

Shumoku とはInstallationQuick Start1. YAML でネットワークを定義2. CLI でレンダリング3. ベンダーアイコンを使うNext Steps