skills.rest
CaufieldZ
CaufieldZCOMMUNITY
Explore all skills by this author →
GitHub

flowchart

Generate standalone HTML flowcharts from charts.json using AntV X6 and dagre.

4|Updated Apr 8, 2026
Search Tags:#automation#flowchart#diagram#embedding#swimlane#workflow-visualization
One-click install
npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill flowchart-caufieldz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flowchart
Source: https://github.com/CaufieldZ/pm-workspace-public/tree/main/.claude/skills/flowchart
Command: npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill flowchart-caufieldz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Generate standalone HTML flowcharts to visualize complex processes, approval flows, and decision chains for easy embedding in PRD, PPT, or architecture diagrams.

Core Features & Use Cases

  • Produces one or more HTML flowcharts (branch or swimlane) that can be embedded into slides or documents.
  • Uses AntV X6 + dagre for automatic layout, supports branch diagrams and swimlanes, and includes built-in edge validation to prevent crossings.
  • Useful for illustrating complex workflows like multi-step approvals, cross-team processes, or status transitions, and can be shared as screenshots or embedded visuals in deliverables.

Quick Start

Create a charts.json describing your flowcharts and run the generator to produce an embeddable HTML deliverable.

Frequently Asked Questions about flowchart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a standalone HTML flowchart for embedding into a PRD or PPT?▼

To generate a standalone HTML flowchart for embedding, you provide a minimal charts.json data structure defining nodes and edges, which the generator uses to produce an embeddable HTML deliverable.

Can I visualize cross-team approval processes using swimlane diagrams?▼

Yes, you can visualize cross-team approval processes using swimlane diagrams. The generator supports swimlane layouts to map complex business workflows and decision chains into distinct visual lanes.

Does the flowchart generator use AntV X6 and dagre for automatic layout?▼

Yes, the flowchart generator uses AntV X6 and dagre for automatic layout. These frameworks handle branch diagrams and swimlanes while enforcing self-checks to ensure edges do not cross nodes.

What is the best way to document complex status transitions as a visual diagram?▼

The best way to document complex status transitions as a visual diagram is using a branch diagram. This approach visualizes decision flows and processes as standalone HTML outputs suitable for screenshots or embedding.

Do I need to manually adjust edges to prevent them from crossing nodes in workflow visualization?▼

No, you do not need to manually adjust edges to prevent crossings in workflow visualization. The generator enforces built-in edge validation during the automatic layout process to ensure edges do not cross nodes.

Related Skills

Explore More Product & Management Skills→
kepanokepano
44.5k

json-canvas

Create and edit JSON Canvas files with nodes and edges.

Community
Advanced
EigenwiseEigenwise
20

architecture-diagram

Generate self-contained architecture diagrams as standalone HTML files with inline SVG and CSS.

Community
Intermediate
OKHP3OKHP3
2

okhp3-mermaid-bpmn

Create BPMN diagrams for complex business processes using Mermaid syntax.

Community
Advanced
mhattingpetemhattingpete
657

flowchart-creator

Generate interactive HTML flowcharts with Start/End, Process, and Decision shapes.

Community
Basic