Eu uso muito Mermaid — fluxogramas em documentos de design, diagramas de sequência em READMEs, ocasionalmente um diagrama ER. Diagramas como código são uma mão na roda: versionável, comparável, sem arrastar caixas pela tela. O que nunca foi uma mão na roda é a aparência do resultado.
Os temas embutidos são funcionais, mas as cores parecem datadas. O Mermaid tem, sim, um sistema de temas de verdade: defina theme: 'base' e sobrescreva o que quiser em themeVariables. O problema é o fluxo de trabalho: editar um bloco de frontmatter, renderizar de novo, apertar os olhos para o resultado, adivinhar qual das mais de 70 variáveis pinta aquilo que te incomoda e repetir.
Minha gota d’água foi um diagrama de sequência. Mudei o primaryColor e as caixas de ator mudaram de cor junto — afinal, elas pertencem ao actorBkg. Dez minutos por cor, a maior parte adivinhando, porque o nome de uma variável quase não diz nada sobre o que ela pinta.
O que eu queria era simples: ajustar uma variável e ver o que ela faz. Imediatamente.
Então construí o mermaid.design — código Mermaid à esquerda, prévia ao vivo no centro e todo o sistema de temas editável à direita. Cada mudança renderiza o diagrama de novo no mesmo lugar. O ciclo de feedback foi de minutos para segundos.
Essa é a vitrine. Aqui estão os módulos que realmente economizam tempo.
A galeria: todos os tipos de diagrama de uma vez
O chato das variáveis de tema é que a mesma variável se comporta de jeito diferente em cada tipo de diagrama. A página da galeria renderiza os 84 modelos — fluxogramas, diagramas de sequência, de classes, de estados, ER e mais — ao vivo com o seu tema atual. Mude uma variável, role a galeria e o efeito em cada tipo de diagrama está ali, na sua frente. Chega de ficar alternando entre tipos de diagrama para conferir. É esse tempo que se economiza.
Variáveis de tema: valores padrão e herança à mostra
Cada uma das 73 variáveis mostra seu valor padrão do tema base do mermaid. As que você não definiu ganham um selo AUTO com o valor que o mermaid deriva na hora do render — e de onde esse valor vem:
mainBkgsegueprimaryColorprimaryBorderColoré uma cor de borda calculada a partir deprimaryColorsecondaryTextColoré o inverso desecondaryColor(para contraste)actorBkgseguemainBkg— o que explica a armadilha do começo: mudarprimaryColormexeu nas minhas caixas de ator porque existe uma cadeia de herançaprimaryColor→mainBkg→actorBkg
Vendo a cadeia, recolorir deixa de ser chute.
Predefinições: oficiais, de designer e mais a caminho
21 predefinições, um clique para aplicar: os 11 temas oficiais do mermaid (default, neutral, dark, forest, base, mais as famílias redux e neo da v12) e 10 predefinições de designer que ajustei à mão. Cada uma mostra uma mini prévia ao vivo — e a coleção continua crescendo.
Geração: uma cor primária, uma paleta inteira
Escolha uma única cor primária semente e o gerador rampa a luminosidade no espaço HSL ao redor do matiz dela — uma escala de 8 tons — para derivar uma paleta completa, variante escura incluída. O jeito mais rápido de fazer um diagrama combinar com a sua marca.
Configuração de render: além das cores
As cores são só metade. O Mermaid tem 438 campos de configuração que afetam o render, agrupados por tipo de diagrama em 34 grupos. Alguns exemplos:
- Global:
fontFamily,fontSize,wrap(quebra de texto automática),look(classic ou handDrawn, estilo desenhado à mão) - Fluxogramas:
flowchart.curve(estilo das curvas),flowchart.nodeSpacing/flowchart.rankSpacing,flowchart.diagramPadding - Sequência:
sequence.actorMargin,sequence.messageMargin,sequence.showSequenceNumbers(numeração de mensagens),sequence.mirrorActors - Pizza:
pie.textPosition,pie.donutHole,pie.legendPosition
O grupo correspondente ao seu tipo de diagrama atual abre automaticamente.
Modo ASCII: o diagrama como texto
O mesmo diagrama pode ser renderizado como arte ASCII — um clique para copiar, pronto para comentários de código, mensagens de commit ou documentos em texto puro. Atualmente suporta cinco tipos de diagrama: fluxogramas, sequência, classes, estados e ER. O conjunto de caracteres pode ser box-drawing Unicode ou ASCII puro.
Resumindo
A motivação por trás do mermaid.design é simples: as cores oficiais dos temas são difíceis de gostar, ajustar themeVariables na mão é lento, e eu queria um lugar onde cada mudança mostrasse seu efeito na hora. Hoje ele tem variáveis de tema editáveis ao vivo com valores padrão e herança visíveis, uma galeria que mostra todos os tipos de diagrama de uma vez, predefinições oficiais e de designer, um gerador que tira uma paleta inteira de uma única cor primária, 438 campos de configuração de render e um modo ASCII que transforma diagramas em texto.
Se você também briga com temas de Mermaid, experimente.