flutter-doc

claude-flutter-documenter

A Claude Code plugin that reads your Flutter codebase and produces a cross-linked end-user manual as a folder of Markdown files — complete with screenshots and Mermaid flowcharts.

---

Purpose

Writing user documentation for a Flutter app is tedious: screens multiply, flows change, and prose goes stale. claude-flutter-documenter automates the first draft by letting an LLM do what it's good at — reading code, drafting prose, and keeping structure consistent — while you stay in charge of accuracy.

One command turns a Flutter project into a ready-to-review manual:

• Routes and screens discovered via MaterialApp / GoRouter analysis
• Screenshots captured with flutter screenshot on a connected device or emulator
• Mermaid flowcharts for multi-step user journeys, rendered to SVG if mmdc is installed
• Prose in a consistent voice, tailored to your chosen audience (end-user, admin, power-user)

All output lands in .documenter/ inside your project and opens without any build step in VS Code, GitHub, or Obsidian.

---

Prerequisites

Requirement	Version	Notes
Claude Code	Latest	Plugin host
Node.js	≥ 18	Runs the analysis CLI
Flutter SDK	Any stable	Must be in PATH
Mermaid CLI (mmdc)	Any	Optional — enables SVG diagram export

---

Installation

1. Add the plugin to Claude Code

/plugin marketplace add https://github.com/primus852/claude-flutter-documenter
/plugin install flutter-doc

2. Install optional system dependencies

brew install mermaid-cli   # enables SVG diagram export (optional)

For local development — clone the repo and point the marketplace at your checkout instead:

git clone https://github.com/primus852/claude-flutter-documenter ~/claude-flutter-documenter
/plugin marketplace add ~/claude-flutter-documenter
/plugin install claude-flutter-documenter

---

Quick Start

Open a Flutter project in Claude Code (the working directory must contain pubspec.yaml), then run:

/document

The plugin walks through six steps automatically:

1. Detects your Flutter project (pubspec.yaml)
2. Creates the .documenter/ output structure
3. Analyzes routes, screens, and user journeys
4. Captures screenshots (skippable if no device is connected)
5. Generates Mermaid diagrams
6. Drafts the manual chapters and index

---

Usage

/flutter-doc:document                           # guided run, auto-detects Flutter project
/flutter-doc:document end-user                  # audience = end-user (default)
/flutter-doc:document admin                     # audience = admin
/flutter-doc:document power-user                # audience = power-user
/flutter-doc:document --src lib/features/auth   # scope analysis to a subfolder
/flutter-doc:help                               # full command reference
/flutter-doc:do "update the settings chapter"   # freeform refinement

Audience modes

Audience	Description
end-user (default)	Step-by-step, plain language, screenshot on every screen
admin	Technical detail, assumes familiarity with the system
power-user	Keyboard shortcuts and advanced flows

--src flag

Scope analysis to a specific subfolder when your app is large or monorepo-structured:

/document --src lib/features/onboarding

The path is saved in .documenter/config.json and becomes the default for all future runs on that project.

---

Sample output

The sample/ directory contains a complete documenter run against the Flutter counter demo app (flutter create):

• sample/manual/index.md — generated manual entry point
• sample/diagrams/overview.svg — Mermaid flowchart
• sample/analysis/routes.json — extracted routes
• sample/screenshots/home.png — captured screenshot

---

Output

.documenter/
├── config.json              ← project settings (audience, locale, …)
├── analysis/
│   ├── routes.json          ← discovered routes / screens
│   ├── journeys.json        ← multi-step user flows
│   └── manifest.yaml        ← screenshot inventory
├── screenshots/
│   └── <route-id>.png
├── diagrams/
│   ├── <journey-id>.mmd     ← Mermaid source (always written)
│   └── <journey-id>.svg     ← only if mmdc is installed
└── manual/
    ├── index.md             ← start here
    ├── chapters/
    │   └── <chapter-id>.md
    ├── journeys/
    │   └── <journey-id>.md
    ├── troubleshooting.md
    └── getting-help.md

Open .documenter/manual/index.md in any Markdown viewer — all internal links resolve without a build step.

---

Commands