Overview

svugy renders a diagram written in Markdown as an isometric SVG you can click into.

Input: a .md file with a nested list of components and a list of edges. Any Markdown preview shows it as an outline; it diffs like code.
Output: one .svg file with its CSS and JavaScript inside. Open it in a browser; nothing to install or serve.
Errors: svugy validate reports every problem in one run, with line and column; --format json for scripts and agents.
d2: svugy render also reads .d2 files, and svugy import converts them to Markdown.

The editor below runs svugy compiled to wasm.

---
title: svugy · one render
subtitle: from your diagram file to one explorable SVG
styles:
  stage: (color=#3478f6)
  flow: (traveler=parcel)
---

## Components
- cli: svugy-cli (caption=svugy render, color=#9945ff, height=60, position=0,60)
- pipeline: svugy (caption=the pipeline, color=#1b2436, position=220,0)
  - layout: Layout (stage, caption=plan space, position=18,18)
  - geometry: Geometry (stage, caption=isometric, position=190,18)
  - render: Render (stage, caption=markup, position=362,18)
  - inter: Inter (shape=cylinder, color=#d5dcea, position=190,200)
- runtime (caption=svugy.js · svugy.css, color=#3a3f4b, position=840,0)

## Edges
- layout -> geometry: boxes (flow)
- geometry -> render: shapes (flow)
- layout -> inter: measures (line=badge)
- render -> inter: outlines (line=badge)
- cli -> layout: ① ② model (traveler=document)
- runtime -> render: ③ (line=dotted, traveler=key)

## Legend: What happens on render
- ① the CLI parses your diagram
- ② the pipeline lays it out and draws it
- ③ the runtime is embedded, the SVG written
- (line=dotted): embedded at build time
- (line=badge, target=inter): reads the bundled font

# d2 v0.9.0 · svugy rendering one diagram, drawn by svugy

label: "svugy · one render"
vars: {
  svugy: {
    subtitle: "from your d2 file to one explorable SVG"
    legend: {
      title: What happens on render
      entries: [
        "① the CLI imports your d2"
        "② the pipeline lays it out and draws it"
        "③ the runtime is embedded, the SVG written"
      ]
      dashes: { 5: data; 2: embedded at build time }
      badges: { pipeline.inter: reads the bundled font }
    }
  }
}

cli: svugy-cli {
  style.fill: "#9945ff"
  vars: { svugy: { caption: "svugy render"; height: 60; position: { x: 0; y: 60 } } }
}

pipeline: svugy {
  style.fill: "#1b2436"
  vars: { svugy: { caption: "the pipeline"; position: { x: 220; y: 0 } } }

layout: Layout {
    style.fill: "#3478f6"
    vars: { svugy: { caption: "plan space"; position: { x: 18; y: 18 } } }
  }
  geometry: Geometry {
    style.fill: "#3478f6"
    vars: { svugy: { caption: "isometric"; position: { x: 190; y: 18 } } }
  }
  render: Render {
    style.fill: "#3478f6"
    vars: { svugy: { caption: "markup"; position: { x: 362; y: 18 } } }
  }
  inter: Inter {
    shape: cylinder
    style.fill: "#d5dcea"
    vars: { svugy: { badge: true; position: { x: 190; y: 200 } } }
  }

layout -> geometry: boxes
  geometry -> render: shapes
  layout -> inter: measures
  render -> inter: outlines
}

runtime: {
  style.fill: "#3a3f4b"
  vars: { svugy: { caption: "svugy.js · svugy.css"; position: { x: 840; y: 0 } } }
}

cli -> pipeline.layout: ① ② model
runtime -> pipeline.render: ③ { style.stroke-dash: 2 }

Next: Quickstart

Keyboard shortcuts

svugy

Overview