Stats

Actions

Tags

Help us improve

Share bugs, ideas, or general feedback.

architecture-diagram | cartograph

Skill

architecture-diagram

From cartograph

Generates Mermaid flowcharts visualizing high-level codebase component relationships. Use for onboarding, PR reviews, and understanding system structure.

$

npx claudepluginhub athola/claude-night-market --plugin cartograph

Popularity

Parent stars

279

Parent forks

23

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/cartograph:architecture-diagram

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Generate a Mermaid flowchart showing high-level component

SKILL.md

90 lines · ~571 tokens

Similar Skills

mermaid-architect

55

Scans codebases to auto-generate Mermaid diagrams like ER for DB schemas/models, sequence for API routes, architecture for services, and state diagrams from file structure.

6 tools

data-flow

279

Generates Mermaid sequence diagrams tracing data flows between components. Use for request flows, API call chains, and data transformations in codebases.

diagram-generator

24

Generates Mermaid diagrams for data flows, service relationships, entity structures, sequences, and states to visualize software architecture.

drupal-dev-framework

Stats

LanguagePython

Parent stars279

Parent forks23

MaintenanceGood

Last CommitApr 4, 2026

Actions

View Source View Plugin View on GitHub View README

Tags

mermaid-diagram

architecture-visualization

codebase-structure

Help us improve

Share bugs, ideas, or general feedback.

Architecture Diagram

Generate a Mermaid flowchart showing high-level component relationships in a codebase.

When To Use

Visualizing how plugins/modules relate to each other
Onboarding to understand system structure
Documenting architecture for PR reviews
Answering "how does this system fit together?"

Workflow

Step 1: Explore the Codebase

Dispatch the codebase explorer agent to analyze the scope:

Agent(cartograph:codebase-explorer)
Prompt: Explore [scope] and return a structural model.
Focus on packages, modules, and their relationships
for an architecture diagram.

If no scope is provided, use the project root.

Step 2: Generate Mermaid Syntax

Transform the structural model into a Mermaid flowchart.

Rules for architecture diagrams:

Use flowchart TD (top-down) for hierarchical systems
Use flowchart LR (left-right) for pipeline/flow systems
Group related modules into subgraphs by package
Use descriptive edge labels for relationships
Limit to 15-20 nodes maximum (aggregate small modules)
Use shapes to distinguish component types:
- [Rectangle] for modules/packages
- ([Stadium]) for entry points/commands
- [(Database)] for data stores
- {Diamond} for decision points

Example output:

flowchart TD
    subgraph sanctum[Sanctum Plugin]
        commit[Commit Messages]
        pr[PR Preparation]
        workspace[Workspace Review]
    end

    subgraph leyline[Leyline Plugin]
        git[Git Platform]
        patterns[Error Patterns]
    end

    commit --> git
    pr --> workspace
    pr --> git
    workspace --> patterns

Step 3: Render via MCP

Call the Mermaid Chart MCP to render:

mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram
  prompt: "Architecture diagram of [scope]"
  mermaidCode: [generated syntax]
  diagramType: "flowchart"
  clientName: "claude-code"

If rendering fails, fix the Mermaid syntax based on the error message and retry (max 2 retries).

Step 4: Present Results

Show the rendered diagram to the user with a brief summary of what it depicts (2-3 sentences).