Epsilondelta-ai

Storybook for flowcharts. Auto-discovers Mermaid diagram files from your codebase, organizes them by category, and renders them in a browsable viewer.

11
0
100% credibility
Found Mar 03, 2026 at 11 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Flowbook automatically discovers Mermaid flowchart files in a project, organizes them by categories and tags, and provides a searchable, interactive web viewer.

How It Works

1
📰 Discover Flowbook

You hear about Flowbook, a handy viewer that collects and shows all your project's process diagrams in one beautiful place.

2
🔧 Set it up

With one simple instruction, you prepare Flowbook in your project so it can find your diagrams.

3
📝 Draw your processes

You create easy files describing key steps like login or user journeys using simple diagram language, and Flowbook finds them automatically.

4
▶️ Launch the viewer

You start the viewer, and it opens a webpage on your computer packed with your diagrams organized neatly.

5
🔍 Browse and explore

You search, click categories, zoom and pan stunning interactive diagrams to understand your project's flows perfectly.

6
Add more flows
✏️
Draw by hand

Write more files yourself to map out new processes.

🤖
Ask AI helper

Tell your AI coding friend 'flowbook' and it auto-creates diagrams for your code's logic.

🎉 Share everywhere

You create a static version to share your organized flow library with your team or put online.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 11 to 11 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is flowbook?

Flowbook turns your Mermaid flowcharts into a Storybook-style browsable viewer, auto-discovers .flow.md or .flowchart.md files scattered across your codebase, and organizes them by categories with tags and search. Drop diagrams anywhere with YAML frontmatter for titles, descriptions, and ordering, then spin up a dev server at localhost:6200 via `npm run flowbook` or build a static site for GitHub Pages. Built in TypeScript with React, Vite, and Mermaid, it delivers hot reloads on file changes for instant previews.

Why is it gaining traction?

Unlike static Mermaid embeds or manual docs, flowbook auto-discovers files, provides a searchable sidebar like github storybook react addons, and builds deployable sites rivaling storybook github pages examples. The killer hook is AI agent skills—run `flowbook skill claude` to add slash commands that auto-generate flowbooks login flows or API diagrams from prompts, integrating with tools like Cursor or OpenCode. It's a browsable flowbooks app that feels native to modern workflows.

Who should use this?

Fullstack devs mapping auth flows or state machines in .flow.md files, backend teams documenting microservices, or frontend squads extending github storybook ai for diagrams alongside components. Ideal for projects heavy on Mermaid where you want a centralized, filterable hub without extra tooling.

Verdict

With 11 stars and 1.0% credibility score, flowbook is early-stage—docs are solid with multilingual READMEs, but expect light testing and occasional rough edges. Worth npx-ing for Mermaid-heavy repos; init in seconds and see if the AI skills hook your agents.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.