Flow Diagram
Flow Diagram generates a single self-contained HTML file that visualizes system architectures and request/response flows with a 2-pane layout: an interactive diagram on the left with zoom, pan, and fit-to-view controls, and an explainer sidebar on the right. Click any flow to highlight it with traveling dots along arrows, dim everything else, and reveal its details. Two-way arrows (solid outbound, dashed return) carry numbered step badges colored by semantic meaning—red for auth, purple for scheduled tasks, amber for data pipelines.
Flow Diagram creates self-contained interactive HTML visualizations of system architectures with animated two-way arrows and clickable flow highlighting.
AI-generated summary based on this skill's SKILL.md
Install
unclecatvn/agent-skills/flow-diagram · repository language: HTML
git clone https://github.com/unclecatvn/agent-skills
cp -r agent-skills/skills/flow-diagram ~/.claude/skills/flow-diagramFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is Flow Diagram and what can it create?
Flow Diagram generates a single self-contained HTML file that visualizes system architectures and request/response flows. It produces an interactive 2-pane layout with a zoomable diagram on the left and an explainer sidebar on the right, all without external dependencies.
Can I create interactive system architecture diagram with Flow Diagram?
Yes. Flow Diagram lets you create interactive system architecture diagrams with clickable flows, zoom/pan controls, and a fit-to-view option. Click any flow to highlight it with traveling dots, dim everything else, and see its details in the sidebar.
How does Flow Diagram show two-way request response flows?
Flow Diagram uses two-way arrows where solid lines represent outbound requests and dashed lines show return responses. Each arrow carries numbered step badges colored by semantic meaning—red for auth, purple for scheduled tasks, amber for data pipelines.
Does Flow Diagram support light and dark themes?
Flow Diagram supports both light and dark mode theming. The interactive diagram adapts its colors and styling based on your theme preference, making it suitable for any presentation or documentation context.
Can Flow Diagram include brand logos in architecture diagrams?
Yes. Flow Diagram supports brand logos in enterprise architecture diagrams, allowing you to represent systems with their recognizable visual identities alongside the flow visualization.
What makes Flow Diagram different from Mermaid or Archify?
Flow Diagram replaces rigid templated tools with flexible, hand-drawn-style HTML diagrams. It's self-contained, requires no dependencies, and offers traveling dot animations, clickable flows with explainer cards, and full zoom/pan control—all in one standalone file.
SKILL.md
rendered from the published skill — quoted content, verbatim
name: flow-diagram description: Draws an activity flow / system architecture diagram as ONE self-contained, INTERACTIVE HTML+SVG page (2-pane app layout — left: diagram, default fit-to-view with zoom/pan; right: sidebar with explainer cards), styled like a real hand-drawn enterprise doc (Stripe/AWS-docs style — real brand logos for MongoDB/Odoo/n8n/etc. from a bundled Simple Icons library, neutral white boxes, sans-serif, no "AI neon" look), scroll-to-zoom, auto light/dark with a toggle button — clicking a flow (a legend chip, a line, or a step badge) highlights that flow with traveling dots along the arrows in their direction, a ping at the destination box, and a sidebar panel that slides out, while everything else dims; two-way arrows (OUT = solid blue / RETURN = dashed green) carry numbered step badges, colored by semantic meaning (red = auth checkpoint, purple = scheduled flow, amber = data pipeline), a small "hop" arc where two lines are forced to cross, dashed group regions, one explainer card per flow in the right sidebar. Use this skill ANY TIME the user wants to "draw a diagram", "draw a flow", "draw a system diagram", "redraw this so it's easier to follow",
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 11 files
skills/flow-diagram/SKILL.md
skills/flow-diagram/assets/add-drag-to-rearrange.js
skills/flow-diagram/assets/add-flow-dots.js
skills/flow-diagram/assets/add-flow-ping.js
skills/flow-diagram/assets/check-collisions.js
skills/flow-diagram/assets/check-svg.js
skills/flow-diagram/assets/fix-arrow-gaps.js
skills/flow-diagram/assets/icons-library.html
skills/flow-diagram/assets/template.html
skills/flow-diagram/references/flow-diagram-example.html
skills/flow-diagram/references/layout-patterns-guide.html