Dependency Visualization Skill

Project Autopilot - Visualization patterns and algorithms

Copyright (c) 2026 Jeremy McSpadden jeremy@fluxlabs.net

Reference this skill for generating dependency graphs, critical path analysis, and visual representations of project structure.

Mermaid Syntax Reference

Basic Graph Structure

graph TD
    A[Node A] --> B[Node B]
    A --> C[Node C]
    B --> D[Node D]
    C --> D

Direction Options

graph TD

graph TB

graph BT

graph LR

graph RL

Node Shapes

graph TD
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D[[Subroutine]]
    E[(Database)]
    F((Circle))
    G{Diamond}
    H{{Hexagon}}

Node Labels with Line Breaks

graph TD
    A[Line 1<br/>Line 2<br/>Line 3]

Subgraphs

graph TD
    subgraph Phase1["Phase 1: Setup"]
        A[Task A]
        B[Task B]
    end
    subgraph Phase2["Phase 2: Build"]
        C[Task C]
        D[Task D]
    end
    A --> C
    B --> D

Edge Styles

graph TD
    A --> B
    A --- C
    A -.-> D
    A ==> E
    A --text--> F
    A -.text.-> G

Styling

graph TD
    A[Complete]
    B[In Progress]
    C[Pending]

    style A fill:#90EE90,stroke:#333
    style B fill:#FFD700,stroke:#333
    style C fill:#E0E0E0,stroke:#333

Class Definitions

graph TD
    A:::complete[Complete]
    B:::inProgress[In Progress]
    C:::pending[Pending]

    classDef complete fill:#90EE90,stroke:#333
    classDef inProgress fill:#FFD700,stroke:#333
    classDef pending fill:#E0E0E0,stroke:#333

Color Scheme

Status Colors

#90EE90

#FFD700

#E0E0E0

#FF6B6B

#FF6B6B

#FFA500

Color by Phase Type

#87CEEB

#DDA0DD

#FFB366

#98FB98

#20B2AA

#FFB6C1

#FFFF99

#F08080

#D3D3D3

#6495ED

Critical Path Algorithm

Longest Path in DAG

ALGORITHM: FindCriticalPath(G, weights)

INPUT:
    G = Directed Acyclic Graph with nodes V and edges E
    weights = Map of node -> cost

OUTPUT:
    criticalPath = Array of nodes forming longest path
    pathLength = Total cost of critical path

PROCEDURE:

    # 1. Topological Sort
    sorted = TopologicalSort(G)

    # 2. Initialize distances
    dist = {}
    pred = {}
    FOR each v IN V:
        dist[v] = 0
        pred[v] = null

    # 3. Process in topological order
    FOR each u IN sorted:
        FOR each v IN G.neighbors(u):
            # Relaxation for longest path (use > instead of <)
            IF dist[u] + weights[v] > dist[v]:
                dist[v] = dist[u] + weights[v]
                pred[v] = u

    # 4. Find end node with maximum distance
    endNode = argmax(dist)

    # 5. Reconstruct path
    path = []
    current = endNode
    WHILE current != null:
        path.prepend(current)
        current = pred[current]

    RETURN {
        path: path,
        length: dist[endNode]
    }

Topological Sort (Kahn's Algorithm)

ALGORITHM: TopologicalSort(G)

INPUT:
    G = Directed Acyclic Graph

OUTPUT:
    sorted = Array of nodes in topological order

PROCEDURE:

    # 1. Calculate in-degrees
    inDegree = {}
    FOR each v IN G.V:
        inDegree[v] = 0
    FOR each (u, v) IN G.E:
        inDegree[v]++

    # 2. Initialize queue with zero in-degree nodes
    queue = []
    FOR each v IN G.V:
        IF inDegree[v] == 0:
            queue.push(v)

    # 3. Process queue
    sorted = []
    WHILE queue not empty:
        u = queue.shift()
        sorted.push(u)

        FOR each v IN G.neighbors(u):
            inDegree[v]--
            IF inDegree[v] == 0:
                queue.push(v)

    # 4. Check for cycles
    IF sorted.length != G.V.length:
        ERROR "Graph has a cycle"

    RETURN sorted

Parallelization Detection

Finding Independent Phases

ALGORITHM: FindParallelizable(G)

INPUT:
    G = Directed Acyclic Graph

OUTPUT:
    groups = Array of arrays (phases that can run in parallel)

PROCEDURE:

    # Group by dependency depth
    depth = {}
    FOR each v IN TopologicalSort(G):
        maxParentDepth = -1
        FOR each u IN G.predecessors(v):
            maxParentDepth = max(maxParentDepth, depth[u])
        depth[v] = maxParentDepth + 1

    # Group nodes by depth
    groups = {}
    FOR each v IN G.V:
        IF NOT groups[depth[v]]:
            groups[depth[v]] = []
        groups[depth[v]].push(v)

    RETURN values(groups)

Example Output

Depth 0: [001-Setup]
Depth 1: [002-Database, 003-Auth]  # Can run in parallel!
Depth 2: [004-API]
Depth 3: [005-Business]
Depth 4: [006-Frontend, 007-Testing]  # Partially parallel
Depth 5: [008-Security]
Depth 6: [009-Docs, 010-DevOps]  # Can run in parallel!

Bottleneck Analysis

Fan-out Metric

Phases with high fan-out (many dependent phases) are bottlenecks:

ALGORITHM: CalculateFanOut(G)

FOR each v IN G.V:
    # Direct dependents
    directDependents = G.neighbors(v).length

    # All reachable (transitive closure)
    allDependents = ReachableNodes(G, v).length

    bottleneckScore = allDependents / G.V.length

    STORE {
        node: v,
        directDependents: directDependents,
        totalDependents: allDependents,
        bottleneckScore: bottleneckScore
    }

SORT BY bottleneckScore DESC

Impact Classification

ASCII Graph Rendering

Box Drawing Characters

─

│

┌

┐

└

┘

├

┤

┬

┴

┼

▼

▶

Box Template

┌─────────────────┐
│   Phase Name    │
│    $0.15 ✅      │
└────────┬────────┘
         │
         ▼

Layout Algorithm (Sugiyama)

1. Layer Assignment - Assign each node to a layer based on dependencies
2. Crossing Reduction - Minimize edge crossings within layers
3. Coordinate Assignment - Assign x,y coordinates
4. Edge Routing - Draw edges avoiding obstacles

DOT/Graphviz Reference

Basic Structure

digraph G {
    // Global attributes
    rankdir=TB;
    node [shape=box];
    edge [arrowhead=normal];

    // Nodes
    A [label="Node A"];
    B [label="Node B"];

    // Edges
    A -> B;
}

Useful Attributes

Node Attributes

shape

style

fillcolor

fontname

fontsize

Edge Attributes

style

color

arrowhead

label

Rank Constraints

digraph G {
    { rank=same; A; B; C; }  // Force same horizontal level
    { rank=min; Start; }      // Force to top
    { rank=max; End; }        // Force to bottom
}

Best Practices

Graph Readability

1. Limit width - Max 5-6 nodes per row
2. Consistent spacing - Equal gaps between nodes
3. Clear labels - Short, descriptive text
4. Legend included - Explain colors and symbols
5. Direction consistency - Usually top-to-bottom for timelines

Color Accessibility

• Use colorblind-safe palettes
• Don't rely solely on color - use icons/shapes too
• Ensure sufficient contrast
• Test with colorblindness simulators

Performance

• For large graphs (>50 nodes), consider collapsing
• Use subgraphs to group related items
• Provide summary view option
• Cache generated graphs

Integration Examples

Embedding in Markdown

## Project Roadmap

```mermaid
graph TD
    A[Setup] --> B[Build]
    B --> C[Test]
    C --> D[Deploy]
```

Generating PNG (with Graphviz)

# Generate DOT file
/autopilot:graph --format=dot --output=graph.dot

# Convert to PNG
dot -Tpng graph.dot -o graph.png

# Or SVG for web
dot -Tsvg graph.dot -o graph.svg

Mermaid CLI

# Install mermaid-cli
npm install -g @mermaid-js/mermaid-cli

# Generate PNG
mmdc -i graph.mmd -o graph.png

# Generate SVG
mmdc -i graph.mmd -o graph.svg