--- name: "mermaid-live-link" description: "Use ONLY when the user explicitly requests a shareable mermaid.live edit or view link. Do NOT invoke automatically for every Mermaid diagram." ---

Mermaid Live Link

Overview

Use this skill to turn Mermaid code into a mermaid.live URL that opens with the diagram preloaded.

重要：本 skill 不再默认对所有 Mermaid 图自动调用。 大多数现代工具（飞书、GitHub、 VS Code、Trae 等）已原生支持 Mermaid 代码块直接渲染预览，因此默认输出 ``mermaid 代码块即可，无需额外生成在线链接。仅在用户明确要求提供可分享/可编辑的在线链接时才使用本 skill。

• Build a JSON state object.
• Put the Mermaid source into the code field.
• Put the Mermaid config JSON string into the mermaid field.
• Compress the UTF-8 JSON with zlib/deflate.
• Encode the compressed bytes with URL-safe Base64 and strip =.
• Prefix the result with https://mermaid.live/edit#pako: or

https://mermaid.live/view#pako:.

edit opens the live editor. view opens the full-screen preview.

• 文档中包含 Mermaid 图但用户未要求在线链接 → 直接输出 `mermaid 代码块
• 飞书/Lark 文档输出 → 飞书已原生支持 Mermaid 预览，直接用代码块即可
• GitHub README、VS Code、Trae 等支持 Mermaid 渲染的环境 → 不需要额外链接
• 不要因为文档里"有 Mermaid 图"就自动调用本 skill

python3 .trae/skills/mermaid-live-link/generate_mermaid_live_link.py diagram.mmd

cat <<'EOF' | python3 .trae/skills/mermaid-live-link/generate_mermaid_live_link.py
flowchart TD
  A[Start] --> B[Done]
EOF

python3 .trae/skills/mermaid-live-link/generate_mermaid_live_link.py --mode view diagram.mmd

python3 .trae/skills/mermaid-live-link/generate_mermaid_live_link.py --format json diagram.mmd

{
  "code": "<mermaid source>",
  "mermaid": "{\n  \"theme\": \"default\"\n}",
  "autoSync": true,
  "updateDiagram": false,
  "rough": false,
  "panZoom": true,
  "grid": true
}

This is sufficient for normal mermaid.live edit/view links. The exact encoded string changes if any state value changes.

• 确认用户确实需要 mermaid.live 在线链接（而非本地代码块预览）
• Extract the Mermaid code without wrapping it in triple backticks.
• Run the helper script.
• 根据用户需求选择 view（预览）或 edit（编辑）或 both
• 将链接以普通 markdown 链接或 text 代码框形式插入

• 对每个 Mermaid 图都自动生成链接 — 默认不需要，仅在用户明确要求时才生成
• Putting raw Mermaid text directly after # instead of encoding a JSON state.
• Using standard Base64 without URL-safe replacements.
• Forgetting to strip trailing = padding.
• Compressing the Mermaid code alone instead of the full JSON state.
• Passing fenced Markdown blocks including `` `mermaid `` and closing fences.

cat <<'EOF' | python3 .trae/skills/mermaid-live-link/generate_mermaid_live_link.py --mode both
flowchart TD
  A[handler.py] --> B[runtime_ops.py]
  B --> C[(Proactive DB)]
EOF

The script prints both Edit: and View:` URLs ready to paste into docs.