Excalidraw Artist
Create professional hand-drawn style diagrams with Excalidraw, outputting .excalidraw files.
Supported Diagram Types
| Type | Use Cases |
|---|
| Architecture | System design, microservices, layered architecture |
| Flowchart | Business processes, approval workflows, deployment flows |
| Swimlane | Multi-role collaboration, cross-department processes, quarterly roadmaps |
| Timeline | Gantt-style roadmaps, milestone schedules, release plans |
| Sequence | API calls, message flows |
| Wireframe | UI prototypes, page layouts |
| ERD / Data Model | Database schema, entity relationships, API object models |
| State Machine | Order/payment lifecycle, auth states, retry/backoff flows |
| Matrix | Feature comparison, permission matrix, RACI, migration readiness |
| Tree / Hierarchy | Component tree, directory structure, org chart, mind map |
| CI/CD Pipeline | Build→Test→Deploy flows, release gates, environment promotion |
Quick Start
# Example user requests
"Draw a microservices architecture with gateway, user service, order service"
"Create an approval flowchart"
"Draw a login sequence diagram"
"Draw an ERD for user, order, product tables"
"Create a state machine for order lifecycle"
"Make a feature comparison matrix"
"Draw a component tree for the dashboard module"
"Draw a CI/CD pipeline with staging and production"
Output files can be opened and edited at excalidraw.com.
Design Principles
Layout
- Horizontal flow: left to right
- Vertical hierarchy: top to bottom
- Consistent spacing: 40-60px between elements
- Overall width: 1200-1600px
Color Palette (recommended, adjustable per context)
Business Style (default):
| Purpose | Color |
|---|
| Primary | #1e3a5f |
| Secondary | #4a90d9 |
| Background | #f1f5f9 |
| Accent | #10b981 |
| Border | #6b7b8c |
Minimal Style: Primary #1f2937, Border #9ca3af, Background #ffffff
Element Selection
| Type | Shape | Usage |
|---|
| Core Component | Rounded Rectangle | Services, modules |
| Process Node | Rectangle | Steps, actions |
| Decision Point | Diamond | Conditions, branches |
| Data Source | Cylinder | Databases |
| Start/End | Ellipse | Start, end |
Connectors
| Style | Usage |
|---|
| Solid Arrow | Main flow |
| Dashed Arrow | Optional/async |
| Bidirectional Arrow | Two-way calls |
Workflow
- Understand Requirements → Determine diagram type, identify key elements
- Plan Layout → Define dimensions, divide regions; for grid layouts calculate column/row system first (see
references/element-ref.md → Grid Layout Calculation) - Design Color Scheme → Use preset palette or design semantic colors for priority/category encoding (see
references/element-ref.md → Semantic Color Coding) - Build Elements → Read the matching example file from
references/examples/; use semantic IDs for 10+ elements - Verify Bindings → Check every container↔text pair has bidirectional references
- Output File → Generate
.excalidraw file
Reference Documentation
| File | Content |
|---|
references/element-ref.md | Element properties, text binding formulas, grid layout calculation, semantic colors, ID conventions, troubleshooting |
Example files (read only the one matching the diagram type):
| File | Diagram Type |
|---|
references/examples/01-flowchart.md | Flowchart |
references/examples/02-architecture.md | Architecture |
references/examples/03-sequence.md | Sequence |
references/examples/04-swimlane.md | Swimlane / Timeline |
references/examples/05-erd.md | ERD / Data Model |
references/examples/06-state-machine.md | State Machine |
references/examples/07-matrix.md | Matrix / Comparison Table |
references/examples/08-tree.md | Tree / Hierarchy |
references/examples/09-cicd-pipeline.md | CI/CD Pipeline |
Notes
- For complex diagrams, describe requirements step by step
- Large diagrams (>80 elements) may be slow to open; consider splitting
- Use semantic ID prefixes for 10+ elements (see element-ref.md → ID Naming Convention)
- Calculate grid coordinates before placing elements in grid/swimlane layouts
- Fine-tune in Excalidraw after generation
- Mix Chinese/English labels for readability
