flowi

Render structured JSON diagram files as interactive browser diagrams.

11|2|Updated Feb 11, 2026

Search Tags:#planning #architecture #collaboration #flowchart #visualization #diagram

Ready to run

npx skills add https://github.com/aiaiohhh/claude-skills-library --skill flowi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: flowi
Source: https://github.com/aiaiohhh/claude-skills-library/tree/main/skills/flowi
Command: npx skills add https://github.com/aiaiohhh/claude-skills-library --skill flowi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Flowi provides a visual planning surface for architecture, user flows, and system design by turning ideas into interactive diagrams that live in the browser.

Core Features & Use Cases

Visual diagramming for architecture planning, user flows, and UI mockups.
Structured JSON authoring that renders into interactive diagrams in a browser.
Use cases include planning complex systems, outlining data flows, and designing UI interactions.

Quick Start

Create a .flowi directory at the project root, add JSON diagrams to .flowi/*.json, then run the Flowi server to view and edit them in your browser.

Frequently Asked Questions about flowi

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

FAQPage Schema

How do I visualize software architecture diagrams in a browser?▼

Flowcharts are visualized in a browser by creating a local .flowi directory, adding structured JSON diagram files, and running the viewer server to render interactive architecture plans and user flows.

What is the best way to plan user flows and state machines during system design?▼

Planning user flows and state machines involves writing structured JSON files that render as interactive diagrams, providing a visual planning surface to outline data flows and system designs within your project.

Can I use structured JSON to create interactive flowcharts for UI mockups?▼

Yes, structured JSON can create interactive flowcharts for UI mockups. You author JSON files in a local directory and render them through a browser viewer to visually map UI interactions and design layouts.

Does diagram visualization require a local directory setup to function?▼

Yes, diagram visualization requires a local .flowi directory at your project root to store JSON diagram files, plus a running viewer to render and edit these structured diagrams in your browser.

What are the limitations of using JSON for architecture visualization?▼

A limitation of using JSON for architecture visualization is the requirement for a running local viewer to render diagrams. All architecture plans, UX workflows, and state machines must also be manually authored as structured JSON files.