render

Render: ASCII Art → Themed SVG via mdview

Generate DiagramSpec for ASCII art. Embed in markdown. Render via mdview.

AIs know what they're drawing. This skill serializes that knowledge as DiagramSpec JSON so mdview's asciisvg renderer produces accurate, themed SVG — no heuristics, no network calls to kroki.io.

How to Run

/render EPISTEMIC_MAP.md              # Render specific file
/render                               # Render all .md files in current directory
/render --serve                       # Render and start live-reload server
/render --check                       # Audit: show which files have/lack specs

Phase 1: Discover ASCII Art Blocks

Read the target markdown file(s). For each file:

1. Find all fenced code blocks (```)
2. Classify each block:
   • mermaid → skip (mdview handles these via mermaid.ink)
   • svgbob/ditaa → skip (explicitly typed)
   • Unmarked or text/ascii → check if ASCII art (box-drawing chars, arrows, borders)
3. For each ASCII art block, check if a <!-- diagram-spec: {...} --> comment already exists in the preceding lines
4. Blocks WITH specs → already handled, skip
5. Blocks WITHOUT specs → need spec generation (Phase 2)

Report what was found:

Found 3 ASCII art blocks in EPISTEMIC_MAP.md:
  Block 1 (lines 15-77): No spec — NEEDS GENERATION
  Block 2 (lines 83-103): No spec — NEEDS GENERATION
  Block 3 (lines 120-145): Has spec — OK

Phase 2: Generate DiagramSpec JSON

For each ASCII art block without a spec, analyze the diagram and generate a DiagramSpec.

DiagramSpec Schema

{
  "type": "<flow|sequence|box|table|wireframe|state_machine>",
  "title": "Optional title",
  "layout": "<auto|horizontal|vertical|grid|nested|sequence>",
  "elements": [
    {
      "id": "unique_id",
      "label": "Display text",
      "type": "<node|actor|box|panel|header|row|decision>",
      "children": ["child_id_1"],
      "properties": {
        "sections": [["line 1", "line 2"], ["section 2 line 1"]]
      }
    }
  ],
  "connections": [
    {
      "from": "source_id",
      "to": "target_id",
      "label": "Optional label",
      "style": "solid"
    }
  ]
}