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:

flowchart, sequence

qualquer outra

fonte mermaid

gramática conhecida?

Parse + solve

Mostra a fence como código

Boxes, Text, Vectors

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| B

correntes; links abertos não desenham ponta; tracejado/grosso desenham no único estilo de linha

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).

PREVIOUSMarkdown-pt-BR

NEXTPackageArchitecture-pt-BR

ON THIS PAGE

A gramática do v1

A paridade do layout é pinada, não desejada

As arestas curvam

Cercas (v1, deliberadas)