mermaid-flow-image

Mermaid Flow Image Skill

Applicable scenarios

• User requests:
  • "Generate a mermaid flowchart"
  • "Simplified flowchart"
  • "Detailed Chinese version"
  • "Export the image and send it"

Output strategy

1. Structure first: Break the process into stages (input / routing / processing / state / exceptions).
2. Then choose granularity：
   • Simplified version: ≤ 12 nodes, highlighting the main path.
   • Detailed version: layered by subgraph, covering key branches and state write-back.
3. Chinese first: Use Chinese for node text; technical keywords can mix Chinese and English.
4. Renderability first：
   • Quote node text as much as possible to avoid parsing failures caused by Mermaid reserved characters.
   • Avoid directly using unescaped < > / combinations inside nodes.

Image export specifications

• Default output path:./media/images/<name>.png
• Mermaid source file:./media/images/<name>.mmd
• Use script:./scripts/python/render_mermaid_kroki.py
• High resolution: set scale to 2 or 3

Example command (Python method):

python3 ./scripts/python/render_mermaid_kroki.py \
  ./media/images/rpc-flow.mmd \
  ./media/images/rpc-flow.png \
  3

Mermaid template (detailed Chinese)

flowchart TD
  A["输入消息"] --> B["会话路由"]
  B --> C{是否命中复用进程}
  C -->|是| D["复用并继续处理"]
  C -->|否| E["新建进程并初始化"]
  D --> F["流式事件"]
  E --> F
  F --> G["状态持久化"]

Delivery checklist

• Mermaid syntax is renderable
• Chinese labels are clear and unambiguous
• Both the main branch and exception branches are visible
• PNG is produced and successfully sent