用途
Mermaid 技能用于在 Emacs 中根据最近的交互上下文创建 Mermaid 图表。当用户调用 "/mermaid" 时，它会从当前上下文中提取或推导出可图表化的数据，生成一张透明背景的 PNG 图片，并以 Markdown 图片的形式输出，使其能够内联渲染。
主要能力
- 从最近的交互上下文中提取或推导出可图表化的数据。
- 生成透明背景的 PNG 图片。
- 以 Markdown 图片格式输出结果，使其内联显示。
- 支持多种图表类型，包括 sequence、flowchart、class、state、er、gantt 等。
- 在有助于清晰表达时添加标题。
使用方式
- 从当前上下文中提取或推导出可图表化的数据。
- 如果本次会话中尚未从之前的图表获知 Emacs 前景色和背景模式，则进行查询：
emacsclient --eval '(face-foreground (quote default))'
emacsclient --eval '(frame-parameter nil (quote background-mode))'
第一个命令返回类似 "#eeffff" 的十六进制颜色，第二个命令返回 dark 或 light。后续所有图表复用这两个值。
- 将 Mermaid 文件写入临时文件。
- 写入一个 JSON 配置文件，用查询到的前景色覆盖主题变量。根据背景模式将 "theme" 设置为 "dark" 或 "default"。
- 运行 mmdc：如果背景模式为 dark 则使用 -t dark，如果为 light 则使用 -t default。
# Use -t dark for dark, -t default for light
PUPPETEER_EXECUTABLE_PATH=/opt/homebrew/bin/chromium mmdc \
-i /tmp/agent-diagram-XXXX.mmd \
-o /tmp/agent-diagram-XXXX.png \
-t dark -b transparent --scale 2 \
--configFile /tmp/agent-diagram-XXXX-config.json
- 将结果作为 Markdown 图片单独输出在一行：
Mermaid 配置模板
写入以下 JSON 配置文件以应用 Emacs 前景色。将 #eeffff 替换为查询到的颜色。根据 Emacs 背景模式将 "theme" 设置为 "dark" 或 "default"。
{
"theme": "dark",
"themeVariables": {
"primaryTextColor": "#eeffff",
"secondaryTextColor": "#eeffff",
"tertiaryTextColor": "#eeffff",
"primaryBorderColor": "#eeffff",
"lineColor": "#eeffff",
"textColor": "#eeffff",
"actorTextColor": "#eeffff",
"actorBorder": "#eeffff",
"signalColor": "#eeffff",
"signalTextColor": "#eeffff",
"labelTextColor": "#eeffff",
"loopTextColor": "#eeffff",
"noteTextColor": "#eeffff",
"noteBorderColor": "#eeffff",
"sectionTextColor": "#eeffff",
"titleColor": "#eeffff"
}
}
Mermaid 图表模板
sequenceDiagram
participant a as Alice
participant b as Bob
a->>b: Hello
b-->>a: Hi back
规则
- 每个会话只查询一次 Emacs 前景色，并在后续所有图表中复用。仅在颜色尚未知时再次查询。
- 每个会话通过 (frame-parameter nil 'background-mode) 查询一次 Emacs 背景模式。dark 使用 -t dark，light 使用 -t default。始终使用 -b transparent --scale 2。
- 调用 mmdc 时始终使用 PUPPETEER_EXECUTABLE_PATH=/opt/homebrew/bin/chromium。
- 始终写入一个 JSON 配置文件，将 themeVariables 设置为查询到的前景色，并通过 --configFile 传入。
- 文件名中始终使用时间戳（例如 /tmp/agent-diagram-$(date +%s).png）。不要使用描述性名称。
- mmdc 成功运行后，将 Markdown 图片（）单独输出在一行。
- 为数据选择合适的图表类型（sequence、flowchart、class、state、er、gantt 等）。
- 在有助于清晰表达时添加标题。
- 如果最近的上下文中没有可图表化的数据，则告知用户。
适用场景
适用于在 Emacs 中需要将对话或交互上下文中的信息快速转化为可视化图表的场景，例如梳理流程、展示时序、表达类关系或状态转换等。
限制
- 依赖 Emacs 环境及 emacsclient 命令。
- 依赖 mmdc 命令及 PUPPETEER_EXECUTABLE_PATH 指定的 Chromium 路径。
- 如果最近的上下文中没有可图表化的数据，则无法生成图表，只能告知用户。
- 关于收费、价格、平台支持范围等信息，资料中暂未提供。