Help us improve
Share bugs, ideas, or general feedback.
npx claudepluginhub rjroy/vibe-garden --plugin lore-developmentHow this skill is triggered — by the user, by Claude, or both
Slash command
/lore-development:ddpThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
---
Generates Mermaid diagrams for flowcharts, sequence diagrams, state diagrams, class diagrams, ERDs, and system architectures to visualize complex concepts and processes.
Generates Mermaid diagrams from text descriptions by analyzing intent to select types like activity, sequence, deployment, architecture, class, ER, or state.
Generates Mermaid diagrams for data flows, service relationships, entity structures, sequences, and states to visualize software architecture.
Share bugs, ideas, or general feedback.
Sometimes specs aren't enough. You need to see how things connect.
This skill generates Mermaid diagrams to visualize:
When you can't hold the mental model in your head, draw the damn picture.
/lore-development:ddp <what to visualize>
/lore-development:ddp how chat messages flow between user and AI
/lore-development:ddp the inheritance hierarchy of BaseView
/lore-development:ddp the request lifecycle from HTTP to database
/lore-development:ddp state transitions in the order fulfillment system
/lore-development:ddp how the plugin system loads and registers skills
Clarify what needs visualization:
Trace through the codebase to understand:
| Need to Show | Diagram Type | Good For |
|---|---|---|
| Sequential interactions | sequenceDiagram | API calls, message passing, request/response |
| Class relationships | classDiagram | Inheritance, composition, dependencies |
| System structure | graph / flowchart | Components, modules, architecture |
| State changes | stateDiagram-v2 | Workflows, lifecycles, FSMs |
| Data flow | flowchart | Pipelines, transformations |
| Entity relationships | erDiagram | Data models, database schemas |
Create a Mermaid diagram that:
Add context around the diagram:
Save to .lore/diagrams/[subject].md
Use kebab-case. Be descriptive (e.g., chat-message-flow.md, view-class-hierarchy.md).
Before writing: Load ${CLAUDE_PLUGIN_ROOT}/shared/frontmatter-schema.md to get frontmatter field definitions and status values for diagrams.
---
[frontmatter per schema]
---
# Diagram: [Subject]
## Context
What prompted this visualization. What question are we answering?
## Diagram
```mermaid
[diagram code]
Explanation of what the diagram shows. Call out non-obvious elements.
What becomes clear when you see it visually:
Important aspects not captured in this view:
Links to specs, other diagrams, or code that provides more context.
## Additional Resources
### Reference Files
For Mermaid syntax patterns and diagram examples, consult:
- **`references/mermaid-patterns.md`** - Flow, structure, architecture, and lifecycle diagram patterns with tips
## Context
Check `.lore/specs/` for feature documentation that might need visualization.
Check `.lore/brainstorm/` for ideas that might benefit from a picture.
## Specialized Agents
If `.lore/lore-agents.md` exists, consult it for specialized agents that can help identify what needs visualization. Architecture agents can highlight complex relationships worth diagramming. Invoke relevant agents via Task tool and incorporate their insights.