# Ec Draw

> Generate hand-drawn Excalidraw diagrams. Use when the user asks to draw, sketch, or create a diagram, flowchart, architecture diagram, concept diagram, or any visual diagram. Trigger on "draw", "sketch", "diagram", "flowchart", "visualize", "excalidraw".

- Skill: `flingjie/ec-draw` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add flingjie/ec-draw`
- Raw SKILL.md: https://api.skillmd.com/api/skills/flingjie/ec-draw/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: flingjie (https://skillmd.com/u/flingjie)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/flingjie/ec-draw

---


# ec-draw: Excalidraw Diagram Generator

Generate themed `.excalidraw` files by filling a template's content slots and calling `renderFromRecipe`.

## Workflow

1. **Pick a template** — Read the matching template from `templates/` for the diagram type the user wants:

   **Recipe-ready (YAML frontmatter, use with `renderFromRecipe`):**
   - `templates/narrative-framework.md` — concept diagrams, frameworks, mental models

   **Informational (use as pattern references with Diagram API or JSON descriptors):**
   - `templates/flowchart.md` — decision trees, process flows
   - `templates/architecture.md` — system topology, service diagrams
   - `templates/sequence.md` — API flows, message passing
   - `templates/er.md` — entity-relationship, class diagrams
   - `templates/comparison.md` — A vs B, side-by-side comparisons
   - `templates/before-after-gap.md` — problem → gap → solution narratives
   - `templates/layered-explainer.md` — what → how → why depth layers
   - `templates/whiteboard.md` — freeform sketches, brainstorming

2. **Fill the slots** — Each template defines a `## Slots` section. Fill in the content (headings, items, icons, labels) based on what the user asked for. Templates define grid, colors, and layout — do NOT include coordinates or hex colors in your slots.

3. **Call `renderFromRecipe`** — Pass the template ID, your filled slots, and the theme:

```ts
import { renderFromRecipe } from "ec-draw";
import { writeFileSync } from "fs";

const doc = renderFromRecipe("narrative-framework", {
  title: "Diagram Title",
  sections: [
    {
      heading: "Section 1",
      role: "primary",
      items: [{ title: "Card A", subtitle: "description", icon: "cloud" }],
    },
    // ... more sections
  ],
  transitions: [
    { from: 0, to: 1, label: "describes the relationship" },
  ],
  callout: { text: "Key insight message", icon: "fire" },
}, "sketchy");

writeFileSync("output.excalidraw", JSON.stringify(doc, null, 2), "utf-8");
```

4. **Save** — Write to `.excalidraw` file.

## Themes

| Theme | Best for |
|-------|----------|
| `sketchy` | Brainstorming, early ideas (default) |
| `professional` | Architecture docs, formal presentations |
| `dark` | Dark-mode contexts |
| `colorful` | Slides, teaching, demos |

## Built-in Icons

`database`, `server`, `cloud`, `user`, `gear`, `document`, `globe`, `mobile`, `lock`, `fire`, `brain`, `code`.

## Tips

- **Read the template before writing slots** — each template defines its own roles, grid, and rules
- **Transitions must have labels** — never create silent arrows between sections
- **Use roles from the template's table** — don't invent new role names
- **Match icons to semantic meaning** — `cloud` for external services, `lock` for security, `gear` for processing