Coding

class-diagram

Try it

Generates 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 classDiagram diagram type
  • Show only public methods and key attributes
  • Use Mermaid relationship notation:
    • <|-- for inheritance
    • *-- for composition
    • o-- 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 architecture diagram showing high-level component relationships

26 installs

Generates a Mermaid sequence diagram showing how data moves between components

22 installs

Generates a Mermaid workflow diagram showing process steps, decisions, and state transitions

25 installs

Generates a Mermaid dependency graph showing import relationships between modules

23 installs

Traces execution paths through the code graph with criticality scoring and Mermaid charts

22 installs

Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.

by nssa.io1.0k installs47 stars