Shumoku

Getting Started

Install Shumoku and create your first network diagram

What is Shumoku

Shumoku is a library for creating network diagrams in Markdown.

  • Define networks in YAML → Generate SVG/HTML/PNG
  • 900+ vendor icons (Yamaha, Aruba, AWS, Juniper)
  • Interactive HTML output (pan/zoom, tooltips)
  • Integration with NetBox and custom APIs

Installation

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

Quick Start

1. Define your network in 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
    standard: 10GBASE-T

  - from: switch
    to: server
    standard: 1000BASE-T

2. Render with CLI

# SVG output
npx @shumoku/cli render network.yaml -o diagram.svg

# Interactive HTML output
npx @shumoku/cli render network.yaml -f html -o diagram.html

# PNG output
npx @shumoku/cli render network.yaml -f png -o diagram.png

3. Or use as a library

import { YamlParser, renderGraphToHtml } from 'shumoku'

// parse() returns { graph, warnings }
const { graph } = new YamlParser().parse(yamlString)

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

For PNG output, use @shumoku/renderer-png (Node.js only):

import { renderGraphToPng } from '@shumoku/renderer-png'

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

4. Use vendor icons

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

Next Steps

On this page