From oh-my-daily-skills
Creates or edits Excalidraw hand-drawn diagrams (architecture, flowchart, sequence, ERD, wireframe, state machine, CI/CD pipeline) with style-preserving edits for Obsidian Excalidraw Markdown files.
How this skill is triggered — by the user, by Claude, or both
Slash command
/oh-my-daily-skills:excalidraw-artistThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create professional hand-drawn style diagrams with Excalidraw, outputting standalone `.excalidraw` JSON or Obsidian `.excalidraw.md` drawings.
references/element-ref.mdreferences/examples/01-flowchart.mdreferences/examples/02-architecture.mdreferences/examples/03-sequence.mdreferences/examples/04-swimlane.mdreferences/examples/05-erd.mdreferences/examples/06-state-machine.mdreferences/examples/07-matrix.mdreferences/examples/08-tree.mdreferences/examples/09-cicd-pipeline.mdreferences/examples/10-wireframe.mdreferences/examples/11-timeline.mdreferences/organic-architecture-style.mdscripts/validate-excalidraw.mjsCreate professional hand-drawn style diagrams with Excalidraw, outputting standalone .excalidraw JSON or Obsidian .excalidraw.md drawings.
| 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 |
# 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.
When editing an existing diagram, preserve its visual language unless the user explicitly asks for a redesign.
points and bindings whenever possible; smooth hand-drawn connector paths are part of the design.references/organic-architecture-style.md before editing.Business Style (default):
| Purpose | Color |
|---|---|
| Primary | #1e3a5f |
| Secondary | #4a90d9 |
| Background | #f1f5f9 |
| Accent | #10b981 |
| Border | #6b7b8c |
Minimal Style: Primary #1f2937, Border #9ca3af, Background #ffffff
| 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 |
| Style | Usage |
|---|---|
| Solid Arrow | Main flow |
| Dashed Arrow | Optional/async |
| Bidirectional Arrow | Two-way calls |
references/element-ref.md → Grid Layout Calculation)references/examples/; use semantic IDs for 10+ elementsstartBinding and endBinding, and both endpoint elements must include that arrow in boundElementsnode skills/excalidraw-artist/scripts/validate-excalidraw.mjs <file.excalidraw> on extracted JSON before claiming the diagram is complete.excalidraw or .excalidraw.md formatarrow.startBinding.elementId points to the source element.arrow.endBinding.elementId points to the target element.{ "id": "<arrow-id>", "type": "arrow" } in boundElements.containerId.{ "id": "<text-id>", "type": "text" } in boundElements.line for decorative separators. Use arrow only when the connection should stay attached during dragging.\n only at semantic boundaries: phrase, slash group, or list item. Do not split Chinese words like 步骤, 产物, 证据, or English identifiers like frontend-skills.text.width; do not rely on Excalidraw auto-wrap to fix overflow.x/y/width/height and connector bindings; Excalidraw may change text bounds without changing the container.| File | Content |
|---|---|
references/element-ref.md | Element properties, text binding formulas, grid layout calculation, semantic colors, ID conventions, troubleshooting |
references/organic-architecture-style.md | Style-preserving edit guide for organic panorama architecture diagrams and Obsidian compressed Markdown drawings |
scripts/validate-excalidraw.mjs | Validation for arrow endpoint bindings and container text bindings |
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 |
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 |
references/examples/10-wireframe.md | Wireframe |
references/examples/11-timeline.md | Timeline / Gantt |
.excalidraw.md, preserve the Markdown wrapper and re-encode ## Drawing as compressed-json when the source file is compressednpx claudepluginhub shiqkuangsan/oh-my-daily-skillsGenerates Excalidraw JSON diagram files (.excalidraw) for visualizing workflows, architectures, and concepts as visual arguments with evidence artifacts for technical diagrams.
Generates Excalidraw diagram JSON files (.excalidraw) that argue visually for workflows, architectures, or concepts. Ideal for teaching relationships, flows, and technical integrations with evidence artifacts.
Generates Excalidraw diagram JSON files that argue visually, not just display information. Use for workflows, architectures, or concepts.