Mermaid Flow Image Skill
SkillMediaOrganizes 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.
Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.
No other account needed.
Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.
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 流程图”
- “简化流程图”
- “详细中文版本”
- “导出图片并发送”
输出策略
- 先结构化:把流程拆成阶段(输入 / 路由 / 处理 / 状态 / 异常)。
- 再选粒度:
- 简化版:≤ 12 个节点,突出主路径。
- 详细版:按子图(subgraph)分层,覆盖关键分支与状态回写。
- 中文优先:节点文案用中文,技术关键词可中英混排。
- 可渲染优先:
- 节点文字尽量加引号,避免 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