{"enrichment":{"faq":[{"a":"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.","q":"What is Flow Diagram and what can it create?"},{"a":"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.","q":"Can I create interactive system architecture diagram with Flow Diagram?"},{"a":"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\u2014red for auth, purple for scheduled tasks, amber for data pipelines.","q":"How does Flow Diagram show two-way request response flows?"},{"a":"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.","q":"Does Flow Diagram support light and dark themes?"},{"a":"Yes. Flow Diagram supports brand logos in enterprise architecture diagrams, allowing you to represent systems with their recognizable visual identities alongside the flow visualization.","q":"Can Flow Diagram include brand logos in architecture diagrams?"},{"a":"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\u2014all in one standalone file.","q":"What makes Flow Diagram different from Mermaid or Archify?"}],"shadow_tags":["interactive-visualization","system-architecture","request-response-flow","animated-diagrams","svg-graphics","no-dependencies","enterprise-documentation","data-flow-mapping","accessibility-first","theme-support"],"summary_rewrite":"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\u2014red for auth, purple for scheduled tasks, amber for data pipelines."},"files":[{"bytes":28186,"path":"skills/flow-diagram/SKILL.md","sha256":"2288a5afcb0aa582c4607ff97ef8dc0bde77faf9a0d95852fd3664872a0963b3","url":"https://skillfed.io/files/unclecatvn/agent-skills/flow-diagram/d2e2f918/SKILL.md"}],"id":"unclecatvn/agent-skills/flow-diagram","links":{"html":"https://skillfed.io/unclecatvn/agent-skills/flow-diagram","md":"https://skillfed.io/unclecatvn/agent-skills/flow-diagram.md","repo":"https://github.com/unclecatvn/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":55,"language":"HTML","last_updated":"2026-07-14","license":"MIT","name":"Flow Diagram","publisher":"unclecatvn","stars":116},"relations":{"similar":[{"id":"cathrynlavery/diagram-design/diagram-design"},{"id":"yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph"},{"id":"guanyang/open-agent-hub/baoyu-diagram"},{"id":"JimLiu/baoyu-skills/baoyu-diagram"},{"id":"csthink/dashmotion/dashmotion"},{"id":"alfredolopez80/multi-agent-ralph-loop/architecture-diagram"},{"id":"pedronauck/skills/architecture-diagram"},{"id":"alfredolopez80/multi-agent-ralph-loop/diagram-design"},{"id":"Agents365-ai/365-skills/excalidraw-skill"},{"id":"rookie-ricardo/erduo-skills/anthropic-style-diagram"}]},"slug":{"owner":"unclecatvn","repo":"agent-skills","skill":"flow-diagram"},"version":"d2e2f918"}