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: INLINECODE0
- 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 |
|---|
| INLINECODE5 | INLINECODE6 |
| INLINECODE7 |
DOT graph string, e.g.
["digraph { a -> b }"] |
CODEBLOCK0
Usage
- 1. User provides DOT graph description
- Call
wasm-sandbox-run with DOT string in INLINECODE10 - Return the SVG output to the user
DOT Language Reference
CODEBLOCK1
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
Graphviz SVG 生成器
使用 WebAssembly 从 Graphviz DOT 图形描述生成 SVG 图像。
使用时机
触发条件：
- - 关键词：graphviz, DOT, SVG, 流程图
- 用户要求生成/转换/可视化 DOT 语言图
- 用户想要将 Graphviz 图渲染为 SVG
- 用户提供 DOT 记号并想要 SVG 输出
- 用户要求生成/转换/可视化 DOT 语言图
- 用户想要将 Graphviz 图渲染为 SVG
- 用户提供 DOT 记号并想要 SVG 输出
- 关键词：流程图生成, 制图
前置条件
- - 所需插件： openclaw-wasm-sandbox
- WASM 文件： ~/.openclaw/skills/graphviz/files/graphvizcomponent.wasm（使用 wasm-sandbox-download 工具下载，URL：https://raw.githubusercontent.com/guyoung/wasm-sandbox-openclaw-skills/main/graphviz/files/graphvizcomponent.wasm）
工作原理
WASM 组件：
- - 接受 DOT 图形字符串作为参数
- 将 SVG 输出到标准输出
工具
使用 wasm-sandbox-run 工具：
| 参数 | 值 |
|---|
| wasmFile | ~/.openclaw/skills/graphviz/files/graphviz_component.wasm |
| args |
DOT 图形字符串，例如 [digraph { a -> b }] |
javascript
wasm-sandbox-run({
wasmFile: ~/.openclaw/skills/graphviz/files/graphviz_component.wasm,
args: [digraph { a -> b }]
})
使用方法
- 1. 用户提供 DOT 图形描述
- 在 args 中使用 DOT 字符串调用 wasm-sandbox-run
- 将 SVG 输出返回给用户
DOT 语言参考
digraph name { # 有向图
a -> b # 从 a 到 b 的边
b -> c
a [label=节点 A] # 带标签的节点
b [shape=box] # 节点形状
}
graph name { # 无向图
a -- b
b -- c
}
常见节点属性：label（标签）、shape（形状：box 矩形、circle 圆形、diamond 菱形、triangle 三角形）、color（颜色）、style（样式：filled 填充、dashed 虚线）
常见边属性：label（标签）、color（颜色）、style（样式）、dir（方向：forward 正向、back 反向、both 双向、none 无方向）
注意事项
- - 无需系统 graphviz 二进制文件——纯 WASM 执行
- 无需执行权限——在沙箱中运行
- 在沙箱中运行，无隐式文件/网络访问权限
- 输出为纯 SVG，可直接显示或保存
