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
Decision gist · record as of 2026-07-14
Flow Diagram creates self-contained interactive HTML visualizations of system architectures with animated two-way arrows and clickable flow highlighting. 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.
Use it when
- Yes.
- Flow Diagram uses two-way arrows where solid lines represent outbound requests and dashed lines show return responses.
Verify before relying
Read SKILL.md below before installing (11 files). Open directory: indexed for reading, not audited.
Install
unclecatvn/agent-skills/flow-diagram · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create an interactive, self-contained HTML diagram showing system flows with two-way arrows and clickable animations”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Generate 27 types of technical and product diagrams—from architecture and flowcharts to data models and security matrices—as self-contained HTML files with embedded SVG. The skill enforces a shared design system with a first-run customization gate that extracts your brand colors and fonts from your website, ensuring diagrams match your visual identity without manual setup.
Fireworks Tech Graph turns descriptions of systems and engineering concepts into polished technical diagrams—architecture charts, data flows, sequence diagrams, C4 models, and more—then exports them as SVG, PNG, interactive HTML, or animated GIF. The skill validates geometry and syntax automatically, supports multiple diagram styles, and works offline.
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
Dashmotion generates professional animated technical diagrams as single self-contained HTML+SVG files. Use it for flowcharts, workflows, architecture diagrams, and system topologies—especially when you want connectors that visibly flow and requests that travel as light dots through the system. Output is lightweight, loops forever, and opens in any browser without dependencies.
Architecture Diagram creates polished technical diagrams rendered as standalone HTML files with embedded SVG and CSS. It uses a dark color scheme with semantic styling for different component types—frontend, backend, database, cloud services, security, and messaging systems—making complex system layouts clear and visually consistent.
Diagram Design generates architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, layer stack, Venn, and pyramid diagrams as standalone HTML with embedded SVG. A first-run style guide gate prompts you to align colors and fonts with your brand before generating, then enforces an opinionated design system centered on restraint—one accent color, minimal nodes, and deletion over addition.
More skills Excalidraw Skill (unlicensed) · anthropic-style-diagram (MIT) · architecture-diagram (MIT)