›_ Prompt
Diagrama a partir de texto (Mermaid)
Transforma a explicação de um processo ou ideia em código Mermaid, que vira diagrama de caixas e setas quando colado num editor.
Exemplo real
rodado em 25/10/2026 · Claude Opus 5.5 via claude -p, sem ferramentas e sem contexto
o que entrou
Um parágrafo descrevendo o atendimento no WhatsApp de uma loja de roupas inventada, da chegada da cliente pelo anúncio até o envio pelos Correios e a troca em 7 dias.
o que o prompt devolveu · ver tudo ↓
flowchart TD
classDef default fill:#ffffff,stroke:#000000,stroke-width:2px,color:#000000
classDef decisao fill:#000000,stroke:#000000,stroke-width:2px,color:#ffffff
classDef fim fill:#ffffff,stroke:#000000,stroke-width:4px,color:#000000
subgraph ENTRADA["1. ENTRADA DA CLIENTE"]
A1["Anúncio"]
A2["Link da bio"]
A3["Cliente chega no WhatsApp da Flor de Linho"]
end
subgraph ATEND["2. ATENDIMENTO"]
B1["Atendente pergunta o tamanho"]
B2["Atendente envia o catálogo"]
B3{"A peça tem no estoque?"}
end
subgraph ESPERA["3A. SEM ESTOQUE"]
C1["Oferece avisar quando a peça chegar"]
C2["Anota a cliente na lista de espera"]
end
subgraph PAG["3B. COM ESTOQUE: PAGAMENTO"]
D1["Atendente envia o link de pagamento"]
D2{"Pagou no Pix em até 24 horas?"}
D3["Atendente envia mensagem de lembrete"]
end
subgraph LOG["4. SEPARAÇÃO E ENVIO"]
E1["DIA 0: separação embala o pedido no mesmo dia"]
E2["DIA 1: pedido sai pelos Correios"]
E3["Código de rastreio enviado pelo WhatsApp"]
end
subgraph TROCA["5. POLÍTICA DE TROCA: PRAZO DE 7 DIAS"]
F1{"Cliente quer trocar dentro de 7 dias?"}
F2["Cliente envia foto da peça"]
F3["Cliente recebe a etiqueta de devolução"]
F4{"O que a cliente escolhe?"}
F5["Outra peça"]
F6["Vale-compra"]
end
G["Venda concluída"]
A1 --> A3
A2 --> A3
A3 --> B1
B1 --> B2
B2 --> B3
B3 -->|"Não tem"| C1
C1 --> C2
C2 -.->|"Peça chegou: cliente é avisada"| D1
B3 -->|"Tem"| D1
D1 --> D2
D2 -->|"Não pagou"| D3
D3 -.->|"Aguarda o pagamento"| D2
D2 -->|"Pagou no Pix"| E1
E1 --> E2
E2 --> E3
E3 --> F1
F1 -->|"Não"| G
F1 -->|"Sim"| F2
F2 --> F3
F3 --> F4
F4 --> F5
F4 --> F6
class B3,D2,F1,F4 decisao
class G,F5,F6 fim
style ENTRADA fill:#ffffff,stroke:#000000,stroke-width:2px,color:#000000
style ATEND fill:#ffffff,stroke:#000000,stroke-width:2px,color:#000000
style ESPERA fill:#ffffff,stroke:#000000,stroke-width:2px,stroke-dasharray:6 4,color:#000000
style PAG fill:#ffffff,stroke:#000000,stroke-width:2px,color:#000000
style LOG fill:#ffffff,stroke:#000000,stroke-width:2px,color:#000000
style TROCA fill:#ffffff,stroke:#000000,stroke-width:2px,color:#000000
VISUAL EXPLANATION
- Dois canais, anúncio e bio, levam a cliente ao WhatsApp.
- O atendimento segue em ordem: perguntar tamanho, depois enviar catálogo.
- O losango preto marca a primeira decisão: a peça tem estoque.
- Sem estoque: a atendente oferece aviso e anota na lista de espera.
- A linha tracejada mostra a cliente da espera voltando quando chega.
- Com estoque, a atendente envia o link de pagamento pelo WhatsApp.
- Sem Pix em 24 horas, a atendente manda um lembrete e espera.
- Depois do Pix, a peça é embalada no dia zero, o mesmo dia.
- No dia um o pedido sai pelos Correios, com rastreio pelo WhatsApp.
- A troca vale por 7 dias: foto, etiqueta, depois a escolha.
- No fim, a cliente escolhe outra peça ou um vale-compra.
- Caixas brancas com borda preta e losangos pretos mantêm o alto contraste.A loja e o processo foram inventados pro teste. O diagrama veio com os textos das caixas em português e só o título VISUAL EXPLANATION em inglês; não conferimos o código num editor de Mermaid.
serve pra
Você descreve um processo, como o atendimento da loja, um funil ou as etapas de um curso, e ele devolve o diagrama escrito em Mermaid (um jeito de desenhar fluxograma escrevendo texto). Junto vem uma lista curta explicando como cada parte do texto virou caixa e seta. Serve pra pôr um fluxo numa aula, proposta ou documento sem desenhar à mão.
na prática
- Você cola o texto do processo e recebe só o código do diagrama, sem bloco de código em volta, pronto pra colar num editor de Mermaid.
- Abaixo do diagrama vem uma seção VISUAL EXPLANATION com frases curtas dizendo como o texto virou o desenho.
- Processo mais complexo vira diagrama maior; se tiver coisa demais, ele resume na ideia principal.
- O diagrama sai em preto e branco, com contraste alto.
é pra você se
Professor, prestador de serviço ou dono de loja que precisa mostrar um processo pra equipe ou pro cliente e não quer abrir programa de desenho.
não é pra você se
Quem espera uma imagem pronta, porque a saída é código, e você precisa colar num editor de Mermaid pra ver o desenho. O prompt é em inglês; o título da explicação vem em inglês (VISUAL EXPLANATION).
- Licença
- MIT
MIT: uso livre, inclusive comercial, mantendo o aviso de copyright do projeto Fabric.
- Uso comercial
- Livre
- Custo
- grátis
- Dificuldade
- Dificuldade: fácil
- No GitHub
- ★ 44kúltimo push 2026-10-25
- Funciona em
- qualquer chat: Claude, ChatGPT, Gemini
como usar
Cole o prompt, escreva seu processo logo depois de INPUT e cole o código que voltar num editor de Mermaid pra ver o diagrama.
dados do GitHub conferidos em 2026-10-26





