Workflow Diagram
Produce accurate Mermaid flowcharts of CI/CD pipelines, hook chains, and state machines by exploring the repo then rendering decision and process nodes.
Overview
Workflow Diagram is an agent skill most often used in Build (also Ship, Operate) that generates Mermaid flowcharts of pipelines and state transitions after a structured codebase exploration pass.
Install
npx skills add https://github.com/athola/claude-night-market --skill workflow-diagramWhat is this skill?
- Two-step workflow: codebase explorer agent first, then Mermaid syntax generation
- Supports flowchart TD for sequences and LR for parallel pipeline tracks
- Shape vocabulary: rectangles, diamonds, stadium start/end, subroutines, join circles
- Explicit triggers: Makefiles, CI configs, hook chains, lifecycle methods
- Subgraph grouping for parallel tracks and labeled transition edges
- Documented workflow has 2 main steps: explore codebase, then generate Mermaid syntax
- Diagram rules cover 5 distinct Mermaid node shape types for process, decision, start/end, subroutine, and join
Adoption & trust: 1 installs on skills.sh; 304 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You know something runs in steps but cannot show stakeholders or future-you the real branch points and parallel tracks hidden in CI configs and scripts.
Who is it for?
Solo devs documenting deploy or release flows, onboarding contributors, or answering “what happens when this command runs?” from the actual tree.
Skip if: One-line scripts with no branching, teams that already maintain canonical diagrams in a dedicated diagram-as-code repo with no drift, or purely aesthetic UI mockups.
When should I use this skill?
Use when documenting CI/CD pipelines or lifecycle processes.
What do I get? / Deliverables
You get a Mermaid flowchart with typed nodes, labeled edges, and optional subgraphs that mirrors Makefile, CI, and hook logic discovered in the repo.
- Mermaid flowchart source
- Structured list of process steps and decision points
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is build/docs because the skill’s stated goal is generating diagrams from code or documentation for explainability, not executing deploys or fixing runtime errors. Docs subphase matches “what steps happen when X runs?” answers that live beside READMEs, ADRs, and onboarding—not one-off debugging.
Where it fits
Map Makefile and npm script chains into a TD flowchart for the README contributing section.
Diagram release promotion gates from CI YAML so launch checklists reference the same nodes as automation.
Document rollback and health-check branches as a LR pipeline with parallel verification tracks.
How it compares
Repo-grounded Mermaid generation via exploration—not a generic whiteboard prompt or architecture-only C4 skill.
Common Questions / FAQ
Who is workflow-diagram for?
Solo and indie builders who ship with CI/CD or multi-step automation and need diagrams that match the repository, not generic templates.
When should I use workflow-diagram?
In build/docs when onboarding or ADRs need a pipeline map, in ship/launch when explaining release gates, and in operate/infra when documenting lifecycle or recovery sequences.
Is workflow-diagram safe to install?
The skill instructs agents to read your codebase; review the Security Audits panel on this page and scope explorer access to directories you are comfortable exposing.
SKILL.md
READMESKILL.md - Workflow Diagram
# Workflow Diagram Generate a Mermaid flowchart showing process workflows, pipelines, or state machines from code or documentation. ## When To Use - Visualizing CI/CD or deployment pipelines - Documenting multi-step development workflows - Mapping state machines or lifecycle processes - Answering "what steps happen when X runs?" ## 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 process steps, conditional logic, state transitions, and pipeline stages for a workflow diagram. Look for: Makefiles, CI configs, hook chains, command sequences, and lifecycle methods. ``` ### Step 2: Generate Mermaid Syntax Transform the structural model into a Mermaid flowchart with decision nodes and process steps. **Rules for workflow diagrams**: - Use `flowchart TD` for sequential processes - Use `flowchart LR` for pipelines with parallel tracks - Use shapes to distinguish step types: - `[Rectangle]` for process steps - `{Diamond}` for decision points - `([Stadium])` for start/end states - `[[Subroutine]]` for sub-processes - `((Circle))` for join/sync points - Use `-->|label|` for transition conditions - Group parallel tracks into subgraphs - Color-code by outcome: - Default for happy path - Dotted (`-.->`) for error/fallback paths - Thick (`==>`) for critical path - Limit to 20 nodes maximum **Example output**: ```mermaid flowchart TD start([Start: PR Created]) lint[Run Linters] test[Run Tests] review{Code Review} approve[Approved] changes[Request Changes] merge([Merge to Main]) start --> lint --> test test --> review review -->|pass| approve --> merge review -->|fail| changes -.-> lint ``` ### Step 3: Render via MCP Call the Mermaid Chart MCP to render: ``` mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram prompt: "Workflow diagram of [scope/process]" 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 a brief description of the workflow stages and decision points (2-3 sentences).