Mermaid Flow Image Skill

SkillMedia

Organizes flow requirements into renderable Mermaid diagrams (simplified/detailed versions) and generates high-resolution PNG images via Kroki that can be sent directly. Ideal for scenarios where you want to visualize an architecture flow and share it as an image.

Use Mermaid Flow Image Skill in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Mermaid Flow Image Skill and connect your AI. About a minute.

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Mermaid Flow Image Skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Mermaid Flow Image SkillStart free

What this skill tells your AI

The instructions your AI receives, as published by dwsy/agent in skills/mermaid-flow-image/SKILL.md and read by Ahel’s review.

适用场景

  • 用户要求:
    • “生成 mermaid 流程图”
    • “简化流程图”
    • “详细中文版本”
    • “导出图片并发送”

输出策略

  1. 先结构化:把流程拆成阶段(输入 / 路由 / 处理 / 状态 / 异常)。
  2. 再选粒度:
    • 简化版:≤ 12 个节点,突出主路径。
    • 详细版:按子图(subgraph)分层,覆盖关键分支与状态回写。
  3. 中文优先:节点文案用中文,技术关键词可中英混排。
  4. 可渲染优先:
    • 节点文字尽量加引号,避免 Mermaid 保留字符导致解析失败。
    • 避免在节点内直接使用未转义的 < > / 组合。

图片导出规范

  • 默认输出路径:./media/images/<name>.png
  • Mermaid 源文件:./media/images/<name>.mmd
  • 使用脚本:./scripts/python/render_mermaid_kroki.py
  • 高分辨率:将 scale 设为 2 或 3

示例命令(Python 方式):

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

Mermaid 模板(详细中文)

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

交付检查清单

  • Mermaid 语法可渲染
  • 中文标签清晰无歧义
  • 主分支与异常分支都可见
  • 产出 PNG 并成功发送

Signals

GitHub stars
23
Forks
3
Last commit
Sep 2026
Advanced
Item type
skill
Key
mermaid-flow-image
Source
github.com/dwsy/agent