plan-diagramlisted

Generate a visual plan diagram in a dark, hand-drawn (excalidraw) house style. Graphs any logic (not tied to a specific project); prose is written in whatever language the plan is in — English, Chinese, Russian, etc., with full RTL (right-to-left) support. Use when the user asks to turn a plan, flow, decision order, architecture, or multi-system design into an HTML diagram ("plan diagram", "flow chart", "diagram", "流程图", "示意图", or the equivalent in any language). Picks between a vertical FLOW layout (single decision path) and a pan/zoom BOARD layout (multiple parallel coexisting systems), fills the chosen template, writes the HTML into the project, and validates structure.
ANC1024GO/claude-skill-plan-diagram · ★ 0 · Web & Frontend · score 67

Install: claude install-skill ANC1024GO/claude-skill-plan-diagram

# plan-diagram Turn any plan / flow / decision order / architecture into an HTML diagram in a dark, hand-drawn (excalidraw) house style. The **style** is fixed; the **content and language are not** — this skill graphs arbitrary logic and writes the prose in whatever language the source plan uses (English, Chinese, Russian, … — RTL scripts are fully supported). The two templates in `references/` define the visual language: - `references/flow-template.html` — vertical **FLOW** (single decision path) - `references/board-template.html` — pan/zoom **BOARD** (parallel coexisting systems) ## Workflow 1. **Understand the content and note the language.** Read the plan the user gives (a `.md`, a description, or existing docs). Write the diagram in the **same language as the plan** (or the language the user asks for). Set `{{LANG}}`/`{{DIR}}` accordingly (`rtl` for right-to-left scripts, `ltr` otherwise). Ask one question only if the layout choice is genuinely ambiguous. 2. **Choose the layout** (this is the most important decision — see "Layout choice" below). 3. **Load the design language:** `references/design-system.md` — that is the class vocabulary the body is written in. For ready-made block examples, read the content zone (between `` and ``) of the matching template: - FLOW → `references/flow-template.html` - BOARD → `references/board-template.html` 4. **Write a content MD, not the full HTML.** The CSS / pan-zoom J