Documentation

npm install sketchmark roughjs

import { render } from 'sketchmark';

const instance = render({
  container: document.getElementById('diagram'),
  dsl: `diagram
  title label="Hello World"

  theme primary fill="#e8f4ff" stroke="#0044cc" color="#003399"

  box client  label="Client"  theme=primary width=130 height=52
  box server  label="Server"  theme=primary width=130 height=52
  cylinder db label="Database"             width=130 height=64

  client --> server label="HTTP"
  server --> db     label="SQL"

  step highlight client
  step draw client-->server
  step highlight server
  step draw server-->db
  end`,
  renderer:   'svg',
  svgOptions: { showTitle: true, interactive: true, theme: 'light' },
});

// step through animation
instance.anim.next();
instance.anim.prev();
await instance.anim.play(800);

<script src="https://unpkg.com/roughjs@4.6.6/bundled/rough.js"></script>
<script type="importmap">
  { "imports": { "sketchmark": "https://unpkg.com/sketchmark/dist/index.js" } }
</script>
<script type="module">
  import { render } from 'sketchmark';

  render({
    container: document.getElementById('diagram'),
    dsl: `diagram
    box a label="Hello"
    box b label="World"
    a --> b
    end`,
  });
</script>

box           id  label="..." [theme=X] [width=N] [height=N]
circle        id  label="..."
diamond       id  label="..."
hexagon       id  label="..."
triangle      id  label="..."
cylinder      id  label="..."
parallelogram id  label="..."
text          id  label="..."
image         id  label="..." url="https://..."

fromId  connector  toId  [label="..."] [stroke="#color"] [stroke-width=N]

group id [label="..."] [layout=row|column|grid] [gap=N] [padding=N]
      [justify=start|center|end|space-between|space-around]
      [align=start|center|end]
      [columns=N] [width=N] [height=N] [theme=X]
{
  box  child1 label="..."
  group nested layout=row { ... }
}

bare id [layout=row|column|grid] [gap=N] [padding=N] ...
{
  markdown intro width=320
  """
  # Title
  Some prose.
  """

  group diagram layout=column gap=20 padding=30 theme=muted
  {
    box a label="Service A" theme=primary width=130 height=52
  }
}

table id [label="..."] [theme=X] [font=X] [font-size=N] [text-align=left|center|right]
{
  header  Col1  Col2  Col3
  row     val1  val2  val3
  row     val4  val5  val6
}

note id label="Single line"
note id label="Line one
Line two
Line three"
note id label="..."
     [width=N] [height=N]
     [font=X] [font-size=N] [letter-spacing=N]
     [text-align=left|center|right]
     [vertical-align=top|middle|bottom]
     [line-height=1.4]

bar-chart     id [title="..."] [width=N] [height=N]
line-chart    id ...
area-chart    id ...
pie-chart     id ...
donut-chart   id ...
scatter-chart id ...

data
[
  ["Label", "Series1", "Series2"],
  ["Jan",   120,       80       ],
  ["Feb",   150,       95       ]
]

markdown id [width=N] [padding=N] [font=X]
            [text-align=left|center|right] [color=X]
"""
# Heading 1
## Heading 2
### Heading 3

Normal paragraph with **bold** and *italic* text.

Another paragraph after a blank line.
"""

theme primary fill="#e8f4ff" stroke="#0044cc" color="#003399"
theme success fill="#e8ffe8" stroke="#007700" color="#004400"
theme warning fill="#fff9e6" stroke="#f0a500" color="#7a5000"
theme danger  fill="#ffe8e8" stroke="#cc0000" color="#900000"
theme muted   fill="#f5f5f5" stroke="#999999" color="#444444"

# apply to any element
box a theme=primary
group g theme=muted
note n theme=warning
a --> b theme=danger

step  action  target  [options]

const { anim } = render({ container, dsl });

anim.next();              // advance one step
anim.prev();              // go back one step
anim.reset();             // return to initial state
anim.goTo(3);             // jump to step index (0-based)
await anim.play(800);     // auto-play all steps, 800ms per step

anim.currentStep          // current index (-1 = not started)
anim.total                // total step count
anim.canNext              // boolean
anim.canPrev              // boolean
anim.steps                // array of step objects

// listen to events
anim.on((event) => {
  // event.type: 'step-change' | 'animation-reset'
  //           | 'animation-start' | 'animation-end' | 'step-complete'
  console.log(event.stepIndex, event.step);
});

step move node dx=0 dy=80       # snap below final position
step draw node                   # reveal at offset
step move node dx=0 dy=-80      # animate up into final position

step rotate node deg=8
step rotate node deg=-8
step rotate node deg=8
step rotate node deg=25         # cumulative = 33°, toppling effect
step fade   node

step highlight lb
step draw lb-->blue
step move green dx=0 dy=60      # push green below
step draw green
step move green dx=0 dy=-60 duration=500
step fade blue
step draw lb-->green
step highlight green

layout row       # items flow left to right (default)
layout column    # items flow top to bottom
layout grid      # grid — set columns with: config columns=N

group g layout=row justify=space-between width=500 gap=16 padding=20
{
  box a label="A" width=100 height=50
  box b label="B" width=100 height=50
  box c label="C" width=100 height=50
}

import { THEME_NAMES } from 'sketchmark';
// ['light', 'dark', 'ocean', 'forest', 'sunset', 'slate', 'rose', 'midnight', 'sketch']

config font=caveat               # diagram-wide

box a label="Hand-drawn" font=caveat
box b label="Code style"  font=dm-mono font-size=11

import { registerFont } from 'sketchmark';

// font already loaded via <link> or @import
registerFont('brand', '"Brand Sans", sans-serif');

// then use in DSL
// config font=brand
// box a font=brand

box a label="Hello" font="'Pacifico', cursive"

import { render } from 'sketchmark';

const instance = render({
  container:    '#my-div',        // CSS selector, HTMLElement, or SVGSVGElement
  dsl:          '...',
  renderer:     'svg',            // 'svg' (default) | 'canvas'
  injectCSS:    true,             // inject animation CSS into <head>
  svgOptions: {
    showTitle:    true,
    interactive:  true,           // hover + click handlers on nodes
    roughness:    1.3,            // rough.js roughness (0 = smooth)
    bowing:       0.7,            // rough.js bowing
    theme:        'light',        // 'light' | 'dark' | 'auto'
    transparent:  false,          // remove background rect
    onNodeClick:  (nodeId) => {}, // callback on node click
  },
  canvasOptions: {
    scale:        2,              // pixel density (default: devicePixelRatio)
    roughness:    1.3,
    transparent:  false,
  },
  onNodeClick:   (nodeId) => {},
  onReady:       (anim, svg) => {},
});

// returned instance
instance.scene        // SceneGraph — all positioned nodes, edges, groups
instance.anim         // AnimationController
instance.svg          // SVGSVGElement (renderer='svg')
instance.canvas       // HTMLCanvasElement (renderer='canvas')
instance.update(dsl)  // re-render with new DSL, preserves pan/zoom
instance.exportSVG()  // trigger SVG file download
instance.exportPNG()  // trigger PNG file download

import { parse, buildSceneGraph, layout, renderToSVG } from 'sketchmark';

// each step returns the data structure of the next
const ast   = parse(dslString);          // DSL string → DiagramAST
const scene = buildSceneGraph(ast);      // AST → SceneGraph (unpositioned)
layout(scene);                           // compute x/y positions (mutates)
const svg   = renderToSVG(scene, containerEl, {
  theme: 'light',
  showTitle: true,
});

// error handling
import { ParseError } from 'sketchmark';
try {
  const ast = parse(dsl);
} catch (e) {
  if (e instanceof ParseError) {
    console.error(`Line ${e.line}, Col ${e.col}: ${e.message}`);
  }
}

import { exportSVG, exportPNG, exportHTML, getSVGBlob } from 'sketchmark';

// trigger file downloads
exportSVG(svgEl, { filename: 'diagram.svg' });
await exportPNG(svgEl, { filename: 'diagram.png', scale: 2 });

// self-contained HTML with embedded SVG + DSL comment
exportHTML(svgEl, dslSource, { filename: 'diagram.html' });

// get blob without downloading
const blob = getSVGBlob(svgEl);

// via the render() instance
instance.exportSVG('diagram.svg');
await instance.exportPNG('diagram.png');