skills.rest
aiaiohhh
aiaiohhhCOMMUNITY
Explore all skills by this author →
GitHub

flowi

Render structured JSON diagram files as interactive browser diagrams.

11|2|Updated Feb 11, 2026
Search Tags:#planning#architecture#collaboration#flowchart#visualization#diagram
One-click install
npx skills add https://github.com/aiaiohhh/claude-skills-library --skill flowi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
GBSOSSGBSOSS
81

ai-drawio

Generate draw.io compatible XML diagrams from natural language descriptions.

Official
Intermediate
npownpow
4

diagram

Render complex relationships and workflows as interactive Cytoscape.js browser diagrams.

Community
Intermediate
wiltaylorwiltaylor

edit-figma-design

Convert natural language descriptions into Figma designs aligned with design systems.

Community
Intermediate
SayBGMSayBGM

moai-library-mermaid

Generate flowcharts, sequence diagrams, and architecture diagrams using Mermaid syntax.

Community
Advanced