Graphviz SVG Generator

Generate SVG images from Graphviz DOT graph descriptions using WebAssembly.

When to Use

Trigger when:

Keywords: graphviz, DOT, SVG, flowchart
user asks to generate/convert/visualize a graph from DOT language
user wants to render a Graphviz diagram as SVG
user provides DOT notation and wants SVG output
用户要求生成/转换/可视化 DOT 语言图
用户想要将 Graphviz 图渲染为 SVG
用户提供 DOT 记号并想要 SVG 输出
关键词：流程图生成, 制图

Prerequisites

Required plugin: openclaw-wasm-sandbox
WASM file: ~/.openclaw/skills/graphviz/files/graphviz_component.wasm (Use the wasm-sandbox-download tool to download，URL: https://raw.githubusercontent.com/guyoung/wasm-sandbox-openclaw-skills/main/graphviz/files/graphviz_component.wasm)

How It Works

The WASM component:

Accepts DOT graph string as argument
Outputs SVG to stdout

Tool

Use wasm-sandbox-run tool:

| Parameter | Value | |-----------|-------| | wasmFile | ~/.openclaw/skills/graphviz/files/graphviz_component.wasm | | args | DOT graph string, e.g. ["digraph { a -> b }"] |

wasm-sandbox-run({
  wasmFile: "~/.openclaw/skills/graphviz/files/graphviz_component.wasm",
  args: ["digraph { a -> b }"]
})

Usage

User provides DOT graph description
Call wasm-sandbox-run with DOT string in args
Return the SVG output to the user

DOT Language Reference

digraph name {           # Directed graph
  a -> b                 # Edge from a to b
  b -> c
  a [label="Node A"]     # Node with label
  b [shape=box]          # Node shape
}

graph name {             # Undirected graph
  a -- b
  b -- c
}

Common node attributes: label, shape (box, circle, diamond, triangle), color, style (filled, dashed)

Common edge attributes: label, color, style, dir (forward, back, both, none)

Notes

No system graphviz binary needed — pure WASM execution
No execution permission required — runs in sandbox
Runs in sandbox with no implicit file/network access
Output is pure SVG ready to display or save