mddd-cli 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/readme.md +278 -23
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Mermaid Diagram Driven Development (MDDD) CLI 🚀
|
|
2
2
|
|
|
3
|
+

|
|
4
|
+

|
|
5
|
+

|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="#português">🇧🇷 Português</a> •
|
|
11
|
+
<a href="#english">🇺🇸 English</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
<a id="português"></a>
|
|
17
|
+
|
|
18
|
+
# 🇧🇷 Português
|
|
19
|
+
|
|
3
20
|
Uma CLI agnóstica, ultra-leve e cirúrgica para implementar **MDDD (Mermaid Diagram Driven Development)** de forma modular, colocalizada e estritamente versionada.
|
|
4
21
|
|
|
5
22
|
Esta ferramenta automatiza a criação e a conexão de arquivos de especificação visual (Markdown + Mermaid). O objetivo é envelopar as regras de negócio em arquivos `.spec.md` para que qualquer IA de mercado (**Cursor, Windsurf, Claude Code, GitHub Copilot**, etc.) use esses diagramas como a **Fonte Única da Verdade** antes de tocar no código produtivo.
|
|
@@ -17,6 +34,27 @@ No **Mermaid Diagram Driven Development**, invertemos o ciclo tradicional de des
|
|
|
17
34
|
|
|
18
35
|
---
|
|
19
36
|
|
|
37
|
+
## ✅ Pré-visualização dos Diagramas Mermaid
|
|
38
|
+
|
|
39
|
+
Para visualizar os diagramas Mermaid diretamente no seu editor durante o fluxo MDDD, você pode utilizar extensões que renderizam blocos ````mermaid```` em arquivos Markdown:
|
|
40
|
+
|
|
41
|
+
### VS Code
|
|
42
|
+
- **Markdown Preview Mermaid Support** — Adiciona suporte a diagramas Mermaid no preview nativo do Markdown.
|
|
43
|
+
- **Mermaid Editor** — Editor visual com preview lado a lado e exportação.
|
|
44
|
+
- **bierner.markdown-mermaid** — Extensão oficial que estende o preview de Markdown para renderizar Mermaid.
|
|
45
|
+
|
|
46
|
+
### JetBrains (IntelliJ, WebStorm, GoLand, etc.)
|
|
47
|
+
- Suporte nativo a Mermaid a partir do **2024.1** — Basta abrir o arquivo `.spec.md` e usar o preview de Markdown integrado.
|
|
48
|
+
|
|
49
|
+
### Outros Editores
|
|
50
|
+
- **Neovim/Vim:** Utilize plugins como `iamcco/markdown-preview.nvim` (com `markdown-preview` configurado para Mermaid).
|
|
51
|
+
- **Sublime Text:** Pacote `Mermaid` no Package Control que adiciona preview e snippets.
|
|
52
|
+
- **Markdown Editors:** Ferramentas como [Typora](https://typora.io), [Obsidian](https://obsidian.md) e [Notion](https://notion.so) já possuem suporte nativo a Mermaid — basta colar o arquivo `.spec.md` e o diagrama será renderizado automaticamente.
|
|
53
|
+
|
|
54
|
+
> 💡 **Dica:** Quanto melhor a visualização dos diagramas, mais fácil validar os fluxos de negócio antes de implementar.
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
20
58
|
## 📥 Instalação
|
|
21
59
|
|
|
22
60
|
Como o pacote está publicado no NPM, a instalação é global e simples:
|
|
@@ -24,40 +62,68 @@ Como o pacote está publicado no NPM, a instalação é global e simples:
|
|
|
24
62
|
```bash
|
|
25
63
|
# Instalação global
|
|
26
64
|
npm install -g mddd-cli
|
|
27
|
-
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
> **Nota:** Certifique-se de ter o **Node.js v18 ou superior** instalado em sua máquina.
|
|
28
68
|
|
|
29
|
-
|
|
30
|
-
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## 🚀 Guia de Uso Rápido
|
|
72
|
+
|
|
73
|
+
O fluxo MDDD é baseado em comandos de CLI para gerenciar a estrutura e comandos de barra (`/`) para orquestrar a IA no chat.
|
|
74
|
+
|
|
75
|
+
### 1. Inicialize seu projeto
|
|
76
|
+
|
|
77
|
+
Na raiz do seu projeto, execute:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
md init
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Isso criará o arquivo `system_prompt.md` na raiz, contendo as instruções globais que guiarão a IA no entendimento da metodologia MDDD.
|
|
84
|
+
|
|
85
|
+
### 2. Crie uma nova especificação (Feature)
|
|
31
86
|
|
|
32
|
-
|
|
33
|
-
Na raiz do seu projeto, execute: md init
|
|
34
|
-
Isso criará o arquivo system_prompt.md na raiz, contendo as instruções globais que guiarão a IA no entendimento da metodologia MDDD.
|
|
87
|
+
Ao iniciar uma nova funcionalidade, crie o contrato visual dela:
|
|
35
88
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
# Para uma funcionalidade simples (micro)
|
|
89
|
+
```bash
|
|
90
|
+
# Para uma funcionalidade simples (micro)
|
|
39
91
|
md new src/feature-name
|
|
40
92
|
|
|
41
93
|
# Para um módulo completo (macro)
|
|
42
94
|
md new src/feature-name --macro
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Isso gerará o arquivo `feature-name.spec.md` com a estrutura de Mermaid, Matriz de Decisão e Versionamento.
|
|
43
98
|
|
|
44
|
-
|
|
99
|
+
### 3. Auditoria de Legado
|
|
45
100
|
|
|
46
|
-
|
|
47
|
-
|
|
101
|
+
Precisa refatorar um código existente? Audite-o:
|
|
102
|
+
|
|
103
|
+
```bash
|
|
48
104
|
md audit src/path/to/legacy-file.dart
|
|
105
|
+
```
|
|
49
106
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
/md-new Inicia o modo de desenho para nova feature (gera diagrama e tabela).
|
|
54
|
-
/md-edit Solicita alteração em um .spec.md existente (incrementa versão semântica).
|
|
55
|
-
/md-audit Analisa código legado e propõe refatoração visual (Mermaid).
|
|
56
|
-
/md-impl Gera código e testes baseando-se estritamente no diagrama do .spec.md.
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## 🤖 Comandos de Barra (Gatilhos para IAs)
|
|
57
110
|
|
|
58
|
-
|
|
59
|
-
As especificações visuais não ficam centralizadas em pastas distantes. Elas vivem no mesmo diretório do componente, tela ou feature que descrevem.
|
|
111
|
+
Após rodar o `md init`, a sua IA passará a entender estes atalhos quando você os digitar no chat:
|
|
60
112
|
|
|
113
|
+
| Comando | Descrição |
|
|
114
|
+
| :---------- | :------------------------------------------------------------------------------- |
|
|
115
|
+
| `/md-new` | Inicia o modo de desenho para nova feature (gera diagrama e tabela). |
|
|
116
|
+
| `/md-edit` | Solicita alteração em um `.spec.md` existente (incrementa versão semântica). |
|
|
117
|
+
| `/md-audit` | Analisa código legado e propõe refatoração visual (Mermaid). |
|
|
118
|
+
| `/md-impl` | Gera código e testes baseando-se estritamente no diagrama do `.spec.md`. |
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## 🏗️ Arquitetura de Especificação Colocalizada (Co-location)
|
|
123
|
+
|
|
124
|
+
As especificações visuais não ficam centralizadas em pastas distantes. Elas vivem no **mesmo diretório** do componente, tela ou feature que descrevem.
|
|
125
|
+
|
|
126
|
+
```
|
|
61
127
|
src/
|
|
62
128
|
└── home/
|
|
63
129
|
├── home.spec.md # 🌎 MACRO: Visão global do módulo (stateDiagram-v2)
|
|
@@ -66,6 +132,195 @@ src/
|
|
|
66
132
|
│ └── guest_page.dart # 💻 Código produtivo gerado pela IA
|
|
67
133
|
└── consumer/
|
|
68
134
|
└── consumer.spec.md # 🔬 MICRO: Fluxo de tela (graph LR) + Matriz de Decisão
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## 📦 Comandos da CLI
|
|
140
|
+
|
|
141
|
+
| Comando | Descrição |
|
|
142
|
+
| :------------ | :---------------------------------------------------------------------------------------------------- |
|
|
143
|
+
| `md init` | Inicializa o prompt de sistema universal e as skills para guiar qualquer IA no projeto. |
|
|
144
|
+
| `md new` | Cria uma nova especificação `.spec.md` colocalizada com versionamento automático. |
|
|
145
|
+
| `md edit` | Sinaliza uma alteração pendente em um arquivo de especificação existente. |
|
|
146
|
+
| `md audit` | Audita um arquivo de código existente para criar uma especificação retroativa ou sugerir refatoração. |
|
|
147
|
+
| `md impl` | Prepara o ecossistema para implementar código produtivo e testes com base no `.spec.md`. |
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
## 🧪 Tecnologias
|
|
152
|
+
|
|
153
|
+
- **Node.js** >= 18
|
|
154
|
+
- **Commander.js** — Interface CLI robusta e declarativa
|
|
155
|
+
- **Picocolors** — Saída colorida e leve no terminal
|
|
156
|
+
- **Mermaid.js** — Diagramação visual como fonte da verdade
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
## 💬 Precisa de ajuda?
|
|
161
|
+
|
|
162
|
+
Se encontrar qualquer problema, abra uma [Issue no GitHub](https://github.com/JulioCRFilho/mermaid-diagram-driven-development/issues).
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## 📄 Licença
|
|
167
|
+
|
|
168
|
+
Distribuído sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais informações.
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
<a id="english"></a>
|
|
175
|
+
|
|
176
|
+
# 🇺🇸 English
|
|
177
|
+
|
|
178
|
+
An agnostic, ultra-lightweight, and surgical CLI for implementing **MDDD (Mermaid Diagram Driven Development)** in a modular, co-located, and strictly versioned way.
|
|
179
|
+
|
|
180
|
+
This tool automates the creation and connection of visual specification files (Markdown + Mermaid). The goal is to encapsulate business rules within `.spec.md` files so that any AI tool (**Cursor, Windsurf, Claude Code, GitHub Copilot**, etc.) uses these diagrams as the **Single Source of Truth** before touching production code.
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
## 📌 The Concept: MDDD
|
|
185
|
+
|
|
186
|
+
In **Mermaid Diagram Driven Development**, we invert the traditional AI chat-driven development cycle:
|
|
187
|
+
|
|
188
|
+
1. **Design (`/md-new`):** The AI and you create the business rule visually inside the co-located `.spec.md` file.
|
|
189
|
+
2. **Approval:** You review the visual flow directly in your code editor's Markdown preview.
|
|
190
|
+
3. **Editing (`/md-edit`):** Scope adjustments alter the diagram first and increment the file's semantic version.
|
|
191
|
+
4. **Implementation (`/md-impl`):** The AI reads the signed and versioned specification to write the definitive code and unit tests.
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
## ✅ Mermaid Diagram Preview
|
|
196
|
+
|
|
197
|
+
To preview Mermaid diagrams directly in your editor during the MDDD workflow, you can use extensions that render ````mermaid```` blocks in Markdown files:
|
|
198
|
+
|
|
199
|
+
### VS Code
|
|
200
|
+
- **Markdown Preview Mermaid Support** — Adds Mermaid diagram support to the native Markdown preview.
|
|
201
|
+
- **Mermaid Editor** — Visual editor with side-by-side preview and export.
|
|
202
|
+
- **bierner.markdown-mermaid** — Official extension that extends the Markdown preview to render Mermaid.
|
|
203
|
+
|
|
204
|
+
### JetBrains (IntelliJ, WebStorm, GoLand, etc.)
|
|
205
|
+
- Native Mermaid support starting from **2024.1** — Just open the `.spec.md` file and use the built-in Markdown preview.
|
|
206
|
+
|
|
207
|
+
### Other Editors
|
|
208
|
+
- **Neovim/Vim:** Use plugins like `iamcco/markdown-preview.nvim` (with `markdown-preview` configured for Mermaid).
|
|
209
|
+
- **Sublime Text:** `Mermaid` package from Package Control that adds preview and snippets.
|
|
210
|
+
- **Markdown Editors:** Tools like [Typora](https://typora.io), [Obsidian](https://obsidian.md), and [Notion](https://notion.so) already have native Mermaid support — just paste the `.spec.md` file and the diagram will render automatically.
|
|
211
|
+
|
|
212
|
+
> 💡 **Tip:** The better you can visualize the diagrams, the easier it is to validate business flows before implementation.
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
## 📥 Installation
|
|
217
|
+
|
|
218
|
+
Since the package is published on NPM, installation is global and simple:
|
|
219
|
+
|
|
220
|
+
```bash
|
|
221
|
+
# Global installation
|
|
222
|
+
npm install -g mddd-cli
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
> **Note:** Make sure you have **Node.js v18 or higher** installed on your machine.
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## 🚀 Quick Start Guide
|
|
230
|
+
|
|
231
|
+
The MDDD workflow is based on CLI commands to manage the structure and slash commands (`/`) to orchestrate the AI in the chat.
|
|
232
|
+
|
|
233
|
+
### 1. Initialize your project
|
|
234
|
+
|
|
235
|
+
In your project root, run:
|
|
236
|
+
|
|
237
|
+
```bash
|
|
238
|
+
md init
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
This will create the `system_prompt.md` file in the root directory, containing the global instructions that will guide the AI in understanding the MDDD methodology.
|
|
242
|
+
|
|
243
|
+
### 2. Create a new specification (Feature)
|
|
244
|
+
|
|
245
|
+
When starting a new feature, create its visual contract:
|
|
246
|
+
|
|
247
|
+
```bash
|
|
248
|
+
# For a simple feature (micro)
|
|
249
|
+
md new src/feature-name
|
|
250
|
+
|
|
251
|
+
# For a complete module (macro)
|
|
252
|
+
md new src/feature-name --macro
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
This will generate the `feature-name.spec.md` file with the Mermaid structure, Decision Matrix, and Versioning.
|
|
256
|
+
|
|
257
|
+
### 3. Legacy Audit
|
|
258
|
+
|
|
259
|
+
Need to refactor existing code? Audit it:
|
|
260
|
+
|
|
261
|
+
```bash
|
|
262
|
+
md audit src/path/to/legacy-file.dart
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
---
|
|
266
|
+
|
|
267
|
+
## 🤖 Slash Commands (AI Triggers)
|
|
268
|
+
|
|
269
|
+
After running `md init`, your AI will understand these shortcuts when you type them in the chat:
|
|
270
|
+
|
|
271
|
+
| Command | Description |
|
|
272
|
+
| :---------- | :------------------------------------------------------------------------------------ |
|
|
273
|
+
| `/md-new` | Starts design mode for a new feature (generates diagram and table). |
|
|
274
|
+
| `/md-edit` | Requests changes to an existing `.spec.md` file (increments semantic version). |
|
|
275
|
+
| `/md-audit` | Analyzes legacy code and proposes visual refactoring (Mermaid). |
|
|
276
|
+
| `/md-impl` | Generates code and tests strictly based on the `.spec.md` diagram. |
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
## 🏗️ Co-located Specification Architecture
|
|
281
|
+
|
|
282
|
+
Visual specifications are not centralized in distant folders. They live in the **same directory** as the component, screen, or feature they describe.
|
|
283
|
+
|
|
284
|
+
```
|
|
285
|
+
src/
|
|
286
|
+
└── home/
|
|
287
|
+
├── home.spec.md # 🌎 MACRO: Global module view (stateDiagram-v2)
|
|
288
|
+
├── guest/
|
|
289
|
+
│ ├── guest.spec.md # 🔬 MICRO: Screen flow (graph LR) + Decision Matrix
|
|
290
|
+
│ └── guest_page.dart # 💻 Production code generated by AI
|
|
291
|
+
└── consumer/
|
|
292
|
+
└── consumer.spec.md # 🔬 MICRO: Screen flow (graph LR) + Decision Matrix
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
---
|
|
296
|
+
|
|
297
|
+
## 📦 CLI Commands
|
|
298
|
+
|
|
299
|
+
| Command | Description |
|
|
300
|
+
| :------------ | :----------------------------------------------------------------------------------------------------- |
|
|
301
|
+
| `md init` | Initializes the universal system prompt and skills to guide any AI in the project. |
|
|
302
|
+
| `md new` | Creates a new co-located `.spec.md` specification with automatic versioning. |
|
|
303
|
+
| `md edit` | Signals a pending change in an existing specification file. |
|
|
304
|
+
| `md audit` | Audits an existing code file to create a retroactive specification or suggest refactoring. |
|
|
305
|
+
| `md impl` | Prepares the ecosystem to implement production code and tests based on the `.spec.md`. |
|
|
306
|
+
|
|
307
|
+
---
|
|
308
|
+
|
|
309
|
+
## 🧪 Technologies
|
|
310
|
+
|
|
311
|
+
- **Node.js** >= 18
|
|
312
|
+
- **Commander.js** — Robust and declarative CLI interface
|
|
313
|
+
- **Picocolors** — Colorful and lightweight terminal output
|
|
314
|
+
- **Mermaid.js** — Visual diagramming as the source of truth
|
|
315
|
+
|
|
316
|
+
---
|
|
317
|
+
|
|
318
|
+
## 💬 Need help?
|
|
319
|
+
|
|
320
|
+
If you encounter any issues, open a [GitHub Issue](https://github.com/JulioCRFilho/mermaid-diagram-driven-development/issues).
|
|
321
|
+
|
|
322
|
+
---
|
|
323
|
+
|
|
324
|
+
## 📄 License
|
|
69
325
|
|
|
70
|
-
|
|
71
|
-
Se encontrar qualquer problema, abra uma Issue no GitHub.
|
|
326
|
+
Distributed under the MIT license. See the [LICENSE](LICENSE) file for more information.
|