mcpField
M
mermaid

mermaid

github.com/xenodium文档处理14861 次安装14 周前更新
代码仓库

关于 mermaid

此技能根据近期交互内容生成 Mermaid 图表，并渲染为透明背景的 PNG 图片。它会使用 Emacs 的显示设置配置图表颜色和主题。

主要功能

  1. 01从对话内容提取图表信息
  2. 02生成 Mermaid 图表
  3. 03渲染透明背景 PNG 图片
  4. 04依据 Emacs 设置配置颜色

适用场景

  1. 01可视化对话中讨论的流程
  2. 02绘制上下文数据中的关系

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/xenodium/emacs-skills --skill mermaid

安装后在 Claude Code 中输入/mermaid确认已加载。

详细介绍

使用 Mermaid 创建图表

使用 Mermaid 根据最近的交互上下文创建图表。生成一张背景透明的 PNG 图片，并以 Markdown 图片的形式输出，以便内嵌显示。

如何创建图表

  1. 从当前上下文中提取或推导可用于绘制图表的数据。
  2. 如果此前在本次会话中创建图表时尚未获取 Emacs 前景色和背景模式，请查询： 
    emacsclient --eval '(face-foreground (quote default))'
emacsclient --eval '(frame-parameter nil (quote background-mode))'
    第一个命令会返回类似 "#eeffff" 的十六进制颜色值。第二个命令会返回 dark 或 light。后续图表均重复使用这两个值。
  3. 将 Mermaid 文件写入临时文件。
  4. 编写 JSON 配置文件，使用查询到的前景色覆盖主题变量。根据背景模式将 "theme" 设为 "dark" 或 "default"。
  5. 如果背景模式为 dark，使用 -t dark 运行 mmdc；如果为 light，则使用 -t default。
  6. 将结果作为 Markdown 图片单独一行输出： 
    ![description](/tmp/agent-diagram-XXXX.png)

# 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

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 图片（![description](path)）单独一行输出。
  • 根据数据选择合适的图表类型（时序图、流程图、类图、状态图、ER 图、甘特图等）。
  • 在标题有助于理解时添加标题。
  • 如果最近的上下文中没有可用于绘制图表的数据，请告知用户。

评论

支持 Markdown