手绘流程图工作流
将用户的自然语言过程转换为支持的Mermaid图表:
- flowchart TD或flowchart LR用于业务流程、决策树和状态转换。
- sequenceDiagram用于actor/系统交互随时间推移。
- classDiagram用于域对象、DTOs、实体、接口和关系。
仅生成原始Mermaid,不要在写入.mmd文件时将其包裹在Markdown围栏中。
在生成非平凡Mermaid(尤其是序列或类图表)之前,请阅读references/mermaid-generation-rules.md。
将Mermaid源代码保存为.mmd。
运行渲染脚本:
cd <技能目录>
npm install
node scripts/render-mermaid-handdraw.mjs --input /path/to/.mmd --out-dir /path/to/output --name
脚本写入:
- .mmd:归一化的Mermaid源代码
- .excalidraw:可编辑的Excalidraw场景
- .png:渲染的PNG
转换合同
将流程图视为主要的手绘路径。它转换为本地Excalidraw元素,并提供最佳的可编辑草图样式结果。
将sequenceDiagram视为支持的,但是在图表复杂时仍需要视觉验证。
将classDiagram视为支持的,可能在Excalidraw场景中具有图像回退。
如果脚本报告图像回退,PNG是有效的,但编辑性有限。
拒绝不支持的Mermaid图表类型,而不是默默地产生较低质量的结果。
不要声称成功,直到渲染器在没有验证或导出错误的情况下完成。
严格验证规则
在生成Mermaid后,如果需要快速语法门,运行node scripts/render-mermaid-handdraw.mjs --input <文件> --validate-only。
如果验证失败,请编辑Mermaid源代码并重新运行。
不要绕过验证。
更喜欢简单的Mermaid语法而不是巧妙的语法。
避免自定义CSS、HTML标签、Markdown表格内标签、YAML前置内容和实验性Mermaid形状声明。
保持节点ID稳定和ASCII在实用情况下。
将用户面向的中文文本放在标签中,而不是ID中。
渲染说明
脚本使用浏览器执行,因为Excalidraw导出实用程序需要DOM/Canvas API。
如果Playwright没有捆绑浏览器,脚本尝试常见的本地Chrome/Chromium可执行文件路径并尊重CHROME_PATH。
为了获得可复制的结果,请保持package.json中固定版本,除非有特定的理由升级和重新测试渲染器。