How thanveer1086/whiteboarddiagram-skills works
This repository is an instruction skill, not a diagram-rendering application: it guides an AI agent from a user’s diagram request through choosing a layout, visual style, and output format to producing a diagram. The documented capabilities include seven layout patterns, six color palettes, hand-drawn styling, and four output formats. Agent-specific files adapt how the skill is installed or supplied; reference files provide palettes, layouts, and format examples. Source excerpts were unavailable, so links reflect README-documented guidance rather than inspected implementation calls.
Main entry points: SKILL.md Diagram skill · color-palettes.md Color palettes · layout-patterns.md Layout patterns · excalidraw-examples.md Excalidraw examples
Components 17
Skill Guidance
- Diagram skill
SKILL.md - Workflow guidance
SKILL.md - Style guidance
SKILL.md
Design References
- Color palettes
references/color-palettes.md - Layout patterns
references/layout-patterns.md - Excalidraw examples
references/excalidraw-examples.md - Mermaid examples
references/mermaid-handdrawn-examples.md
Agent Integrations
- Claude integration
CLAUDE.md - Cursor integration
.cursorrules - Windsurf integration
.windsurfrules - Copilot integration
.github/copilot-instructions.md
Output Formats
- Mermaid output
- SVG output
- Excalidraw JSON
- HTML output
Other components
- Diagram requester
- AI coding agent
Connections 16
- Diagram requester → AI coding agent: requests diagram
- AI coding agent → Diagram skill: reads guidance
- AI coding agent → Claude integration: reads instructions
- AI coding agent → Cursor integration: reads instructions
- AI coding agent → Windsurf integration: reads instructions
- AI coding agent → Copilot integration: reads instructions
- Diagram skill → Workflow guidance: guides stages
- Diagram skill → Style guidance: guides styling
- Diagram skill → Color palettes: uses palettes
- Diagram skill → Layout patterns: uses patterns
- Diagram skill → Excalidraw examples: provides examples
- Diagram skill → Mermaid examples: provides examples
- AI coding agent → Mermaid output: generates diagram
- AI coding agent → SVG output: generates diagram
- AI coding agent → Excalidraw JSON: generates diagram
- AI coding agent → HTML output: generates diagram