{"skill":{"slug":"handdraw-flowchart","displayName":"handdraw-flowchart","summary":"Create hand-drawn workflow diagrams from natural-language process descriptions by generating strictly validated Mermaid flowchart, sequenceDiagram, or classD...","description":"---\nname: handdraw-flowchart\nversion: 0.1.0\ndescription: Create hand-drawn workflow diagrams from natural-language process descriptions by generating strictly validated Mermaid flowchart, sequenceDiagram, or classDiagram code, converting Mermaid to Excalidraw scene files, and exporting PNGs. Use when Codex needs sketch-style process diagrams, Mermaid-to-Excalidraw conversion, validated Mermaid diagram generation, or PNG exports from process descriptions.\nmetadata:\n  openclaw:\n    homepage: https://github.com/zengiai/handdraw-flowchart\n    requires:\n      bins:\n        - node\n        - npm\n---\n\n# Handdraw Flowchart\n\n## Workflow\n\n1. Convert the user's natural-language process into one supported Mermaid diagram:\n   - `flowchart TD` or `flowchart LR` for business processes, decision trees, and state transitions.\n   - `sequenceDiagram` for actor/system interactions over time.\n   - `classDiagram` for domain objects, DTOs, entities, interfaces, and relationships.\n2. Generate raw Mermaid only. Do not wrap it in Markdown fences when writing `.mmd` files.\n3. Read `references/mermaid-generation-rules.md` before producing non-trivial Mermaid, especially for sequence or class diagrams.\n4. Save the Mermaid source as `<name>.mmd`.\n5. Run the renderer script. It performs strict Mermaid parsing before conversion:\n\n   ```bash\n   cd <skill-directory>\n   npm install\n   node scripts/render-mermaid-handdraw.mjs --input /path/to/<name>.mmd --out-dir /path/to/output --name <name>\n   ```\n\nThe script writes:\n\n- `<name>.mmd`: normalized Mermaid source\n- `<name>.excalidraw`: editable Excalidraw scene\n- `<name>.png`: rendered PNG\n\n## Conversion Contract\n\n- Treat `flowchart` as the primary hand-drawn path. It converts to native Excalidraw elements and gives the best editable sketch-style result.\n- Treat `sequenceDiagram` as supported but still verify output visually when the diagram is complex.\n- Treat `classDiagram` as supported with possible image fallback inside the Excalidraw scene. If the script reports `image-fallback`, the PNG is valid, but editability is limited.\n- Reject unsupported Mermaid diagram types instead of silently producing a lower-quality result.\n- Do not claim success until the renderer has completed without validation or export errors.\n\n## Strict Validation Rules\n\n- Run `node scripts/render-mermaid-handdraw.mjs --input <file> --validate-only` after generating Mermaid if you need a fast syntax gate.\n- If validation fails, edit the Mermaid source and rerun. Do not bypass validation.\n- Prefer simple Mermaid syntax over clever syntax. Avoid custom CSS, HTML labels, Markdown tables inside labels, YAML frontmatter, and experimental Mermaid shape declarations.\n- Keep node IDs stable and ASCII where practical. Put user-facing Chinese text in labels, not IDs.\n\n## Rendering Notes\n\n- The script uses browser execution because Excalidraw export utilities require DOM/canvas APIs.\n- If Playwright has no bundled browser, the script tries common local Chrome/Chromium executable paths and honors `CHROME_PATH`.\n- For reproducible results, keep the versions pinned in `package.json` unless there is a specific reason to upgrade and retest the renderer.\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":369,"installsAllTime":14,"installsCurrent":1,"stars":1,"versions":1},"createdAt":1778319116793,"updatedAt":1778492885325},"latestVersion":{"version":"1.0.0","createdAt":1778319116793,"changelog":"Initial release of handdraw-flowchart.\n\n- Generates hand-drawn style workflow diagrams from natural-language process descriptions.\n- Converts strictly validated Mermaid (flowchart, sequenceDiagram, classDiagram) into Excalidraw scenes and exports PNG images.\n- Script ensures Mermaid syntax validity and supports rejection of unsupported diagram types.\n- Supports editable diagrams with best quality for flowcharts; sequence and class diagrams are supported with caveats.\n- Provides stepwise workflow and strict validation rules for consistent and reliable outputs.","license":"MIT-0"},"metadata":{"setup":[],"os":null,"systems":null},"owner":{"handle":"zengiai","userId":"s17dd04x2g0068n2anqx2cktfs86cper","displayName":"zengiai","image":"https://avatars.githubusercontent.com/u/66161971?v=4"},"moderation":null}