Pitch: claude-plan-visualizer: um viewer local para documentos de plano do Claude Code
Quem usa o Claude Code pra desenvolvimento sabe que ele gera arquivos de plano em .claude/plans/ — documentos markdown que descrevem como ele vai abordar uma tarefa antes de executar.
O problema: ler esses arquivos cru no terminal ou editor de código não é uma experiência boa. São documentos longos, com muitos headings, blocos de código e listas.
Criei o claude-plan-visualizer pra resolver isso. É um viewer local que serve esses markdowns com uma interface limpa de navegação.
O que faz
- Sidebar com arquivos agrupados por data
- Table of contents gerada automaticamente dos headings, com tracking de scroll
- Command palette (Cmd+K) pra busca rápida de arquivos
- Syntax highlighting pra blocos de código
- Suporte a GFM — tabelas, task lists, strikethrough
- Tema light/dark/system
- Zero config — aponta pra um diretório e pronto
Como usar
npm i -g claude-plan-visualizer
claude-plan-visualizer
Ele auto-detecta .claude/plans no diretório atual, sobe um servidor local e abre o browser.
Também aceita flags:
| Flag | Default | Descrição |
|---|---|---|
--dir <path> | auto-detect | Diretório com os arquivos .md |
--port <number> | 3200 | Porta do servidor |
--no-open | — | Não abre o browser automaticamente |
Stack
- React 19 + Vite 6
- Tailwind CSS v4
- shadcn/ui
- react-markdown com GFM e highlight.js
- wouter (routing)
- cmdk (command palette)
Links
- GitHub: https://github.com/felipeorlando/claude-plan-visualizer
- npm: https://npmjs.com/package/claude-plan-visualizer
Open source, licença MIT. Feedback e contribuições são bem-vindos.