Generate hand-drawn style diagrams, flowcharts, mind maps, and architecture diagrams, and output them as Excalidraw JSON format files.
Use cases
- The user says "draw a hand-drawn style flowchart" or "help me draw a mind map"
- The user needs a relaxed and friendly diagram style (for informal occasions)
- The user wants to quickly visualize ideas without needing it to be too formal
Execution method
Generate an Excalidraw JSON format file (.excalidraw), which the user can directly open and edit with Excalidraw.
Differences from draw-io
| Feature | Excalidraw | draw-io |
|---|---|---|
| Style | Hand-drawn, relaxed, friendly | Professional, formal, standardized |
| Applicable scenarios | Brainstorming, teaching, informal presentations | Formal documents, technical specifications |
| Editing method | Web/desktop app | Web/desktop app |
Supported diagram types
- Mind map: topic expansion, knowledge organization
- Flowchart: simple processes, decision trees
- Concept map: concept relationships, knowledge networks
- Architecture diagram: system component relationships
- Wireframe: simple UI sketches
JSON generation specifications
{
"type": "excalidraw",
"version": 2,
"elements": [
{
"type": "rectangle",
"x": 100,
"y": 100,
"width": 200,
"height": 80,
"strokeColor": "#1e1e1e",
"backgroundColor": "#a5d8ff",
"fillStyle": "hachure",
"roughness": 1,
"roundness": { "type": 3 }
}
]
}
Color scheme
Use Excalidraw's preset soft colors:
- Blue series:
#a5d8ff(primary nodes) - Green series:
#b2f2bb(positive/completed) - Yellow series:
#ffec99(attention/in progress) - Red series:
#ffc9c9(problems/blocked) - Purple series:
#d0bfff(auxiliary information)
Output process
- Understand the user's needs and confirm the diagram type
- Generate and save the Excalidraw JSON file
- Tell the user the file path and how to open it
# 在线打开
# https://excalidraw.com/ → 导入文件
# 如果安装了桌面版
open /path/to/diagram.excalidraw
Output specifications
- The generated file extension is
.excalidraw - Use hand-drawn style by default (roughness: 1)
- Node spacing should be reasonable to avoid crowding
- Use Excalidraw's built-in handwritten font for text
- For complex diagrams, confirm the structure first, then generate