ahundt/mermaid-diagrams

使用 beautiful-mermaid 渲染 Mermaid 图表

使用 beautiful-mermaid v1.0.2 和 bun 将 Mermaid .mmd 文件渲染为带样式的 SVG。

技能内容

文件	用途
render-mermaid.ts	CLI 工具：将 .mmd 文件渲染为 SVG
gemini-diagram-prompt.md	Gemini 图像生成提示

安装

仅需安装 bun。beautiful-mermaid 依赖会在首次运行时由 bun 自动安装。

# macOS
brew install oven-sh/bun/bun

# 通用安装程序
curl -fsSL https://bun.sh/install | bash

CLI 参考

render-mermaid — 将 Mermaid .mmd 文件渲染为主题化 SVG

用法:
  bun run render-mermaid.ts [选项] <输入.mmd...>
  echo 'graph TD; A-->B' | bun run render-mermaid.ts -o 输出.svg

选项:
  -o, --output <文件>   输出文件（仅限单个输入）
  --outdir <目录>       多个文件的输出目录
  -t, --theme <名称>    主题（默认：tokyo-night）
  --list-themes         列出可用主题
  --help                显示帮助

输出默认行为： 若不指定 -o 或 --outdir，则在每个输入文件旁写入 <名称>.svg（-d 会被 bun run 忽略；请使用 --outdir）。

快捷方式： 设置 MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts 以缩短命令。

示例

MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts

# 渲染单个文件（输出在输入文件旁）
bun run $MERMAID diagram.mmd

# 渲染到指定输出文件
bun run $MERMAID diagram.mmd -o pretty.svg

# 渲染所有 .mmd 文件到输出目录
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams

# 使用不同主题
bun run $MERMAID -t dracula diagram.mmd

# 从标准输入管道
 echo 'graph TD; A-->B-->C' | bun run $MERMAID -o quick.svg

# 列出主题
bun run $MERMAID --list-themes

项目图表

Mermaid 源文件（.mmd）和渲染输出（.svg）位于 docs/diagrams/，另有一个源文件位于仓库根目录：

源文件	描述
docs/diagrams/autofile-policy.mmd	AutoFile 策略流程图
docs/diagrams/three-stage-autorun.mmd	三阶段自动运行流程图
autorun-architecture.mmd	完整架构（对 beautiful-mermaid 来说过于复杂）

重新生成：

bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams

已知限制

• 包含深度嵌套子图的复杂图表可能触发 dagre 布局错误。失败的图表会被报告，但不会阻塞其他渲染。
• %%{init:...}%% 前置内容会被自动剥离（beautiful-mermaid 会应用自己的主题）。

<image_generation>

Gemini 图像生成

gemini-diagram-prompt.md 包含一个用于 Gemini 生成以目标为导向的项目概览图像的提示。将提示复制到 Gemini 对话中即可。

</image_generation>