visual-whiteboarding
Installation
SKILL.md
Visual Whiteboarding Skill
To be used when the user requests generating diagrams onto a physical board, canvas, or using external visual diagramming tools (Miro, Draw.io, Figma).
1. When to Use Visual Whiteboarding
- Complex Architectures: If a project exceeds 5-7 microservices or involves complex cloud interconnects, suggest a live
Draw.ioorMirosynced architecture over text-bound Mermaid. - PRD Syncing: If a Product Requirements Document (PRD) requires a user flow or journey map, use the
MiroMCP to generate a spatial flow diagram. - Design to Code: If tasked with creating a frontend component based on a
Figmadesign, use theFigmaMCP to read the nodes and tokens, maintaining semantic parity.
2. Choosing the Right Visual Tool
| Tool | Best For | MCP Capability |
|---|---|---|
| Draw.io | C4 Context/Container/Component Diagrams, UML, ERD | Create, read, and write .drawio XML directly. |
| Miro | User Flows, Mind Maps, Architectural Whiteboarding, Sticky Note PRDs | Create shapes, sticky notes, connectors on a live board. |
| Figma | High-fidelity UI Design, Component Specs, UI/UX tokens | Read-only extraction of visual semantics to output React/HTML/CSS code. |
| Mermaid (Image) | Quick, stateless, text-to-image rendering | Translates Markdown blocks to SVG/PNG images. |