flowchart

Name: flowchart
Availability: InStock
Author: caufieldz

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

Ready to run

npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill flowchart-caufieldz

💬 Prompt for ChatGPT / Claude Chat▼

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.