Generates a Mermaid architecture diagram showing high-level component relationships
Coding
class-diagram
Try itGenerates a Mermaid class diagram showing types, inheritance, and composition
What it does
Generates a Mermaid class diagram showing types, inheritance, and composition
The skill document
Night Market Skill — ported from claude-night-market/cartograph. For the full experience with agents, hooks, and commands, install the Claude Code plugin.
Class Diagram
Generate a Mermaid class diagram showing types, their relationships, and public interfaces from a codebase.
When To Use
- Understanding class hierarchies and inheritance
- Documenting public APIs of a module
- Analyzing composition vs. inheritance patterns
- Answering "what types exist and how do they relate?"
Workflow
Step 1: Explore the Codebase
Dispatch the codebase explorer agent:
Agent(cartograph:codebase-explorer)
Prompt: Explore [scope] and return a structural model.
Focus on classes, dataclasses, protocols, type aliases,
inheritance, and composition for a class diagram.
Extract: class names, methods (public only), attributes,
parent classes, and composed types.
Step 2: Generate Mermaid Syntax
Transform the structural model into a Mermaid class diagram.
Rules for class diagrams:
- Use
classDiagramdiagram type - Show only public methods and key attributes
- Use Mermaid relationship notation:
<|--for inheritance*--for compositiono--for aggregation..>for dependency/usage
- Add stereotypes for special types:
<>for Python protocols/interfaces<>for dataclasses<>for enums<>for abstract classes
- Limit to 12-15 classes maximum
- Group related classes with
namespace - Omit private methods and dunder methods
- Show return types for methods
Example output:
classDiagram
class ResumeSession {
+Path config_path
+dict data
+load() ResumeSession
+to_pdf(Path) Path
+to_html(Path) Path
}
class ResumeError {
<>
+str message
+str context
}
class ValidationError {
+list~str~ fields
}
class RenderError {
+str template
}
ResumeError <|-- ValidationError
ResumeError <|-- RenderError
ResumeSession ..> ResumeError
Step 3: Render via MCP
Call the Mermaid Chart MCP to render:
mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram
prompt: "Class diagram of [scope]"
mermaidCode: [generated syntax]
diagramType: "classDiagram"
clientName: "claude-code"
If rendering fails, fix syntax and retry (max 2 retries).
Step 4: Present Results
Show the rendered diagram with analysis notes:
- Total classes and relationship count
- Key inheritance hierarchies identified
- Composition patterns noted
Related skills
Generates a Mermaid sequence diagram showing how data moves between components
Generates a Mermaid workflow diagram showing process steps, decisions, and state transitions
Generates a Mermaid dependency graph showing import relationships between modules
Traces execution paths through the code graph with criticality scoring and Mermaid charts
Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.