Mermaid pt BR

Mermaid

🌐 Esta página em: English · Português

Desde 0.2.0-preview.26

Mermaid desenhado pelo design system: sem mermaid.js, sem documento SVG, sem renderer específico de alvo. Um diagrama é só mais UI: nós são Boxes sobre os tokens de superfície do tema, o losango de decisão é um rombo Vector de path única (o mesmo que os ícones usam nos dois alvos), cada aresta é UMA cúbica Vector traçada com ponta de seta vetorial, e rótulos são Text. Uma árvore, realizada pelo realizer web e pelo Photon, tematizada pelo IAppTheme do próprio app.

Dentro do Markdown é automático (uma fence ```mermaid renderiza como o diagrama) e Mermaid(source) funciona de forma avulsa. Esta página carrega a própria prova:

graph TD
  A[fonte mermaid] --> B{gramática conhecida?}
  B -->|flowchart, sequence| C(Parse + solve)
  B -->|qualquer outra| D[Mostra a fence como código]
  C --> E((Boxes, Text, Vectors))

Loading

O GitHub desenha a fence acima com mermaid.js; o site de documentação desenha a MESMA fence com o componente do próprio SDK: dois renderers, uma fonte, que é exatamente o ponto.

Mermaid(source)                       // avulso

Markdown(chatAnswer)                  // uma fence ```mermaid dentro renderiza nativamente

A gramática do v1

Falado	Notas
graph TD / graph TB / flowchart LR	os dois eixos de fluxo; BT/RL caem no fallback
A[retângulo], A(arredondado), A((círculo)), A{losango}	rótulos entre aspas perdem as aspas
A --> B --> C, A --- B, `A -->	rótulo
sequenceDiagram, participant A as Alice	mensagens declaram participantes ainda não vistos
A->>B: texto, A-->>B: texto, mensagens para si	uma mensagem para si mesma sai e volta
comentários %%, subgraph/end, style, click, notas	pulados, nunca fatais, e o grafo continua desenhando

Gracioso por contrato: uma gramática fora do subconjunto (gantt, classDiagram, state, pie) renderiza como o código da fence de onde veio, então uma resposta de chat com um diagrama exótico degrada para algo verdadeiro, nunca para um desenho quebrado.

A paridade do layout é pinada, não desejada

O parser e o layout rodam em todos os lados (C# para SSR e Photon, o twin transpilado no browser), então a matemática do layout é feita com inteiros e metades exatas: os tamanhos de nó vêm de uma estimativa de avanço plano por caractere, as posições acumulam por soma, e a ORDEM do barycenter é decidida por somas inteiras multiplicadas cruzado (somaA·contB < somaB·contA), nunca por divisão. O ranqueamento é Sugiyama-lite sobre o DAG: um DFS iterativo marca as arestas que fecham ciclo, então uma aresta de retorno sobe em vez de inflar todos os ranks antes dela.

A fixture pinada (__fixtures__/mermaid-layout.txt, regenerada com EQ_UPDATE_MERMAID_FIXTURE=1) é afirmada caractere a caractere por MermaidTests.cs e por mermaid.spec.ts. Se as duas compilações um dia posicionassem uma caixa de forma diferente, uma suíte quebra antes de a página pular na hidratação.

As arestas curvam

Desde 0.2.0-preview.28

Uma aresta de fluxograma é uma cúbica, o S que toda ferramenta de fluxograma desenha, traçada como um único Vector de aspecto livre, nos dois alvos. A cerca que isto fecha dizia "as arestas são ortogonais, as splines curvas precisariam de um nó de path traçado que o vocabulário ainda não tem": o vocabulário agora tem, e este componente foi o caso que deu nome à lacuna. A paridade se sustenta como tudo aqui se sustenta: a string do path é construída de INTEIROS nos dois lados (um float formatado pela cultura da máquina lê 72,5 em metade dos laptops do mundo), e a fixture pinada carrega a caixa e o path de cada curva verbatim.

Cercas (v1, deliberadas)

• A largura do texto é uma estimativa, não uma medição: honesta para um diagrama, determinística em todo lugar.
• Losangos são quadrados por construção (um Vector desenha numa caixa quadrada); rótulos longos de decisão elipsam.
• Um degrau de aninhamento para os irmãos de um rank; o AGRUPAMENTO de subgraph é pulado (os statements dentro dele continuam sendo parseados).