Coding

dependency-graph

Try it

Generates a Mermaid dependency graph showing import relationships between modules

What it does

Generates a Mermaid dependency graph showing import relationships between modules

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.

Dependency Graph

Generate a Mermaid flowchart showing import and dependency relationships between modules, packages, or plugins.

When To Use

  • Understanding what depends on what
  • Finding circular dependencies
  • Analyzing coupling between modules
  • Planning refactoring by seeing dependency impact
  • Answering "what breaks if I change this?"

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 import statements and cross-module dependencies
for a dependency graph. Track both internal and external
imports.

Step 2: Generate Mermaid Syntax

Transform the structural model into a Mermaid flowchart with directed edges representing dependencies.

Rules for dependency graphs:

  • Use flowchart LR (left-right) for dependency direction
  • Each node is a module or package
  • Edges point from dependent to dependency (A --> B means "A depends on B")
  • Color-code by dependency type:
    • Default arrows for internal dependencies
    • Dotted arrows (-.->) for external/optional deps
    • Thick arrows (==>) for critical path dependencies
  • Group into subgraphs by package/plugin
  • If depth parameter given, limit transitive dependencies
  • Highlight circular dependencies with red styling

Example output:

flowchart LR
    subgraph sanctum[Sanctum]
        commit[commit]
        pr_prep[pr_prep]
        workspace[workspace]
    end

    subgraph leyline[Leyline]
        git[git_platform]
        errors[error_patterns]
    end

    subgraph external[External]
        subprocess[subprocess]
        json[json]
    end

    commit --> git
    commit --> json
    pr_prep --> workspace
    pr_prep --> git
    workspace --> errors
    workspace -.-> subprocess

Step 3: Render via MCP

Call the Mermaid Chart MCP to render:

mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram
  prompt: "Dependency graph of [scope]"
  mermaidCode: [generated syntax]
  diagramType: "flowchart"
  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 modules and dependency count
  • Most-depended-on modules (high fan-in)
  • Modules with most dependencies (high fan-out)
  • Circular dependencies if any detected

Related skills

Generates a Mermaid architecture diagram showing high-level component relationships

26 installs

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

25 installs

Generate interactive HTML node-graph diagrams for code visualization. Trigger when user asks to: visualize code architecture, diagram module dependencies, map call chains, graph class relationships, show UI event flows, display widget hierarchy layouts, or understand how code connects. Keywords: "visualize", "diagram", "graph", "map out", "call chain", "architecture", "code flow", "widget hierarchy", "UI layout", "界面布局", "调用链", "代码架构", "可视化", "模块依赖", "函数关系", "类图", "事件流".

24 installs

Converts external documents (PDF, DOCX, PPTX, XLSX, HTML) into editable markdown

23 installs

Convert Markdown heading outlines into themed KMind mind maps. Export PNG or SVG images with theme presets, layouts, edge routes, dark mode, and rainbow bran...

32 installs1 stars

分析源代码逻辑,生成 Mermaid 流程图或 SVG 架构图并渲染为 PNG 图片。官方 mermaid 渲染(与 Markdown 预览一致),支持 16 种主题、5 种视觉风格、语义图形体系和 40+ 产品图标。

23 installs1 stars