A visual tool for the Mikado Method.
Read the announcement blog post
Stuck on a big change with no end in sight? The Mikado Method helps you break unknown problems down so you can make steady progress without breaking things.
- Set your goal. The big change you want to make.
- Break it down. Add sub-tasks. You don't need to figure it all out upfront.
- Work from the leaves. Start with tasks that have no children. Mark them done, then move up.
- Timebox your work. Give yourself ~15 min per task. If you can't finish, break it into smaller tasks, revert your changes, and pick a new leaf.
- Share your progress. Copy the URL. It contains your graph.
No backend. All state lives in the URL.
Prerequisites: Node.js (>=20.19.0) and pnpm (10.x). If you use asdf, the .tool-versions file has you covered.
pnpm install
pnpm devYou'll mostly run pnpm dev to run the app locally.
If you change the code, pnpm test and pnpm lint will be helpful.
Code formatting should run automatically when you commit anyway.
| Command | What it does |
|---|---|
pnpm dev |
Start the dev server |
pnpm test |
Run tests in watch mode |
pnpm test --run |
Single test run (use before committing) |
pnpm lint |
Run the linter, zero warnings allowed |
pnpm build |
TypeScript check + Production build |
pnpm format --write |
Format code with Prettier |
Three layers, strictly separated:
src/model/ Pure functions & types. No React, no side effects.
src/store/ Zustand store. Thin adapter over model functions.
src/components/ React + ReactFlow rendering. Minimal logic.
Data flows one way: user interaction > component > store action > model function (pure) > new state > re-render.
- Vite for dev server and builds
- React Flow for the interactive graph
- Zustand for state management
- Vitest + Testing Library for tests
- Tailwind CSS for styling
- Husky + lint-staged for pre-commit hooks (Prettier on staged files)
Built by Nicolas Carlo. Made with 💜 in Canada 🇨🇦
 Erik Björn 🐛 |
 Nicolas Carlo 💻 📖 🤔 |