# thanveer1086/whiteboarddiagram-skills architecture

> Architecture diagram of the GitHub repository thanveer1086/whiteboarddiagram-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/thanveer1086/whiteboarddiagram-skills
- Repository: https://github.com/thanveer1086/whiteboarddiagram-skills

## Overview

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`](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/SKILL.md) (Diagram skill), [`references/color-palettes.md`](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/color-palettes.md) (Color palettes), [`references/layout-patterns.md`](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/layout-patterns.md) (Layout patterns), [`references/excalidraw-examples.md`](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/excalidraw-examples.md) (Excalidraw examples)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_guidance["Skill Guidance"]
  node_skill["Diagram skill<br/>[SKILL.md]"]
  node_workflow["Workflow guidance<br/>[SKILL.md]"]
  node_style["Style guidance<br/>[SKILL.md]"]
end

subgraph group_references["Design References"]
  node_palette["Color palettes<br/>[color-palettes.md]"]
  node_layouts["Layout patterns<br/>[layout-patterns.md]"]
  node_excalidraw_examples["Excalidraw examples"]
  node_mermaid_examples["Mermaid examples"]
end

subgraph group_integrations["Agent Integrations"]
  node_claude["Claude integration<br/>[CLAUDE.md]"]
  node_cursor["Cursor integration<br/>[.cursorrules]"]
  node_windsurf["Windsurf integration<br/>[.windsurfrules]"]
  node_copilot["Copilot integration"]
end

subgraph group_formats["Output Formats"]
  node_mermaid["Mermaid output"]
  node_svg["SVG output"]
  node_excalidraw["Excalidraw JSON"]
  node_html["HTML output"]
end

node_user(("Diagram requester"))
node_agent(("AI coding agent"))

node_user -->|"requests diagram"| node_agent
node_agent -->|"reads guidance"| node_skill
node_agent -.->|"reads instructions"| node_claude
node_agent -.->|"reads instructions"| node_cursor
node_agent -.->|"reads instructions"| node_windsurf
node_agent -.->|"reads instructions"| node_copilot
node_skill -->|"guides stages"| node_workflow
node_skill -->|"guides styling"| node_style
node_skill -->|"uses palettes"| node_palette
node_skill -->|"uses patterns"| node_layouts
node_skill -->|"provides examples"| node_excalidraw_examples
node_skill -->|"provides examples"| node_mermaid_examples
node_agent -->|"generates diagram"| node_mermaid
node_agent -->|"generates diagram"| node_svg
node_agent -->|"generates diagram"| node_excalidraw
node_agent -->|"generates diagram"| node_html

click node_skill "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/SKILL.md"
click node_workflow "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/SKILL.md"
click node_style "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/SKILL.md"
click node_palette "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/color-palettes.md"
click node_layouts "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/layout-patterns.md"
click node_excalidraw_examples "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/excalidraw-examples.md"
click node_mermaid_examples "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/mermaid-handdrawn-examples.md"
click node_claude "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/CLAUDE.md"
click node_cursor "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/.cursorrules"
click node_windsurf "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/.windsurfrules"
click node_copilot "https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/.github/copilot-instructions.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_skill,node_workflow,node_style toneBlue
class node_palette,node_layouts,node_excalidraw_examples,node_mermaid_examples toneAmber
class node_claude,node_cursor,node_windsurf,node_copilot,node_user toneMint
class node_mermaid,node_svg,node_excalidraw,node_html toneRose
class node_agent toneIndigo
```

## Components

### Skill Guidance

- [Diagram skill](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/SKILL.md): `SKILL.md`
- [Workflow guidance](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/SKILL.md): `SKILL.md`
- [Style guidance](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/SKILL.md): `SKILL.md`

### Design References

- [Color palettes](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/color-palettes.md): `references/color-palettes.md`
- [Layout patterns](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/layout-patterns.md): `references/layout-patterns.md`
- [Excalidraw examples](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/excalidraw-examples.md): `references/excalidraw-examples.md`
- [Mermaid examples](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/references/mermaid-handdrawn-examples.md): `references/mermaid-handdrawn-examples.md`

### Agent Integrations

- [Claude integration](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/CLAUDE.md): `CLAUDE.md`
- [Cursor integration](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/.cursorrules): `.cursorrules`
- [Windsurf integration](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/.windsurfrules): `.windsurfrules`
- [Copilot integration](https://github.com/thanveer1086/whiteboarddiagram-skills/blob/main/.github/copilot-instructions.md): `.github/copilot-instructions.md`

### Output Formats

- **Mermaid output**
- **SVG output**
- **Excalidraw JSON**
- **HTML output**

### Other components

- **Diagram requester**
- **AI coding agent**

## Connections

- 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