Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

cartograph

Codebase visualization through architecture, data flow, dependency, workflow, and class diagrams rendered via Mermaid Chart MCP.

Overview

Cartograph analyzes code structure and generates Mermaid diagrams. A codebase explorer agent extracts modules, imports, and relationships, then diagram-specific skills convert the structural model into rendered visuals.

Installation

/plugin install cartograph@claude-night-market

Skills

SkillDescriptionWhen to Use
architecture-diagramComponent relationship diagramsSystem structure, plugin architecture
data-flowData movement between componentsRequest paths, API flows
dependency-graphImport and dependency relationshipsCoupling analysis, circular deps
workflow-diagramProcess steps and state transitionsCI/CD pipelines, dev workflows
class-diagramClasses, interfaces, inheritanceOOP structure, type hierarchies

Commands

CommandDescription
/visualizeGenerate a codebase diagram

Agents

AgentDescription
codebase-explorerAnalyzes modules, imports, and relationships

Usage Examples

Architecture Diagram

/visualize architecture plugins/sanctum

Generates a flowchart showing component relationships within the specified scope.

Dependency Graph

/visualize dependency plugins/

Shows import relationships between modules. Useful for spotting circular dependencies or tight coupling.

Data Flow

/visualize data-flow plugins/conserve

Produces a sequence diagram tracing data movement through the system.

Workflow Diagram

/visualize workflow

Maps process steps, decision points, and state transitions for development workflows or CI/CD pipelines.

Class Diagram

/visualize class plugins/gauntlet

Shows classes, interfaces, inheritance, and composition within a module.

How It Works

  1. The /visualize command routes to a diagram skill
  2. The skill dispatches the codebase-explorer agent
  3. The agent analyzes code structure and produces a JSON structural model
  4. The skill generates Mermaid syntax from the model
  5. The Mermaid Chart MCP server renders the diagram

Requirements

  • Mermaid Chart MCP server (included with Claude Code)
  • scry: Terminal and browser recordings for demos
  • pensive: Architecture review complements visual diagrams with written assessments
  • archetypes: Architecture paradigm selection pairs with architectural visualization