Codraft
código e desenho, o mesmo diagrama
Editor híbrido

Escreva o código. Ou clique no desenho.

No Codraft o diagrama tem duas mãos. Você digita com autocomplete contextual ou edita direto no desenho — e o código continua sendo a fonte única da verdade, sem virar um arquivo binário que só o app abre.

fechamento-fiscal.mmd
%% codraft:bpmnflowchart TD A((Início)):::evStart B[Conferir documentos]:::tarefa C{Documentação completa?}:::gwX D[Apurar e transmitir]:::tarefa E[Cobrar o cliente]:::tarefa A --> B --> C C -->|Sim| D C -->|Não| E
InícioConferir documentosDocumentaçãocompleta?Apurar e transmitirCobrar o clienteSimNão
Clique num nó do desenho e a linha correspondente acende no código — e vice-versa.

O que tem dentro

Quatro peças que funcionam juntas: você desenha, documenta e reaproveita sem trocar de ferramenta.

BPMN-lite, sem trocar de motor

A notação BPMN aplicada sobre o flowchart: cada elemento vira uma forma com a classe de estilo certa, e as cores viajam junto no código. O SVG e o PNG exportados já saem com a paleta correta, sem depender do app para renderizar.

Início Tarefa Gateway X Gateway + Subprocesso Documento Fim

Exporta BPMN 2.0 de verdade. O botão .bpmn gera o XML com pool, raias, tipos corretos de evento, tarefa e gateway, e as coordenadas de cada forma — abre no Camunda, no Bizagi e no bpmn.io. O que ainda não existe é o caminho de volta: importar um .bpmn de fora para editar aqui.

CLIENTEESCRITÓRIOInícioEnviar docsApurar DASFim