Create Mermaid diagrams (activity, deployment, sequence, architecture) from text descriptions or source code. Use when asked to "create a diagram", "generate mermaid", "document architecture", "code to diagram", "create design doc", or "convert code to diagram". Supports hierarchical on-demand guide loading, Unicode semantic symbols, and high-contrast styling.
From atum-systemnpx claudepluginhub arnwaldn/atum-system --plugin atum-systemThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Integrates PayPal payments with express checkout, subscriptions, refunds, and IPN. Includes JS SDK for frontend buttons and Python REST API for backend capture.
Mermaid diagram and documentation system with specialized guides and code-to-diagram capabilities.
| User Intent | Diagram Type | Guide |
|---|---|---|
| workflow, process, business logic | Activity Diagram | references/guides/diagrams/activity-diagrams.md |
| infrastructure, deployment, cloud | Deployment Diagram | references/guides/diagrams/deployment-diagrams.md |
| system architecture, components | Architecture Diagram | references/guides/diagrams/architecture-diagrams.md |
| API flow, interactions | Sequence Diagram | references/guides/diagrams/sequence-diagrams.md |
| code to diagram | Code-to-Diagram | references/guides/code-to-diagram/ + examples/ |
| design document, full docs | Design Document | assets/*-design-template.md |
| unicode symbols, icons | Unicode Symbols | references/guides/unicode-symbols/guide.md |
| Template | Use For |
|---|---|
| Architecture Design | assets/architecture-design-template.md - System-wide architecture |
| API Design | assets/api-design-template.md - API specifications |
| Feature Design | assets/feature-design-template.md - Feature planning |
| Database Design | assets/database-design-template.md - Database schema |
| System Design | assets/system-design-template.md - Complete system |
Always use Unicode symbols to enhance diagram clarity:
ALL diagrams MUST use high-contrast colors with explicit text color:
classDef primary fill:#90EE90,stroke:#333,stroke-width:2px,color:darkgreen
classDef secondary fill:#87CEEB,stroke:#333,stroke-width:2px,color:darkblue
classDef database fill:#E6E6FA,stroke:#333,stroke-width:2px,color:darkblue
classDef error fill:#FFB6C1,stroke:#DC143C,stroke-width:2px,color:black
classDef decision fill:#FFD700,stroke:#333,stroke-width:2px,color:black
Rules:
color: in every classDefCRITICAL: Never add a diagram to markdown until it passes validation.
./diagrams/<markdown_file>_<num>_<type>_<title>.mmdmmdc -i file.mmd -o file.png -b transparent./diagrams/<markdown_file>_<num>_<type>_<title>.mmd
./diagrams/<markdown_file>_<num>_<type>_<title>.png
Example: ./diagrams/api_design_01_sequence_auth_flow.png
Supported framework examples:
color: property in styles