Mermaid es

Mermaid

🌐 Esta página en: English · Português · Español · Français · Deutsch

Desde 0.2.0-preview.26

Mermaid, dibujado por el design system: sin mermaid.js, sin documento SVG, sin renderizador específico del destino. Un diagrama es simplemente más UI: los nodos son Boxes sobre los tokens de superficie del tema, el rombo de decisión es un Vector de una sola ruta (el mismo vector que usan los iconos de puerta en los dos destinos), cada arista es UN Vector cúbico trazado con una punta de flecha vectorial, las etiquetas son Text. Un árbol, realizado por el realizador web y por Photon, con el tema del propio IAppTheme de la aplicación.

Dentro de Markdown es automático (una cerca ```mermaid se renderiza como el diagrama) y Mermaid(source) funciona por su cuenta. Esta página lleva su propia prueba:

graph TD
  A[fuente mermaid] --> B{gramática conocida?}
  B -->|flowchart, sequence| C(Parsear + resolver)
  B -->|cualquier otra cosa| D[Mostrar la cerca como código]
  C --> E((Boxes, Text, Vectors))

Loading

GitHub dibuja la cerca de arriba con mermaid.js; el sitio de documentación dibuja la MISMA cerca con el componente propio del SDK: dos renderizadores, una fuente, que es exactamente el punto.

Mermaid(source)                       // por su cuenta

Markdown(chatAnswer)                  // una cerca ```mermaid dentro se renderiza de forma nativa

La gramática v1

Hablado	Notas
graph TD / graph TB / flowchart LR	los dos ejes de flujo; BT/RL caen al alternativo
A[rect], A(rounded), A((circle)), A{diamond}	las etiquetas entre comillas pierden las comillas
A --> B --> C, A --- B, `A -->	label
sequenceDiagram, participant A as Alice	los mensajes declaran por sí mismos a los participantes no vistos
A->>B: text, A-->>B: text, mensajes a sí mismo	un mensaje a sí mismo sale en bucle y vuelve
comentarios %%, subgraph/end, style, click, notas	se saltan, nunca son fatales, y el grafo se sigue dibujando

Elegante por contrato: una gramática fuera del subconjunto (gantt, classDiagram, state, pie) se renderiza como el código con cerca del que vino, así que una respuesta de chat con un diagrama exótico degrada a algo verdadero, nunca a una imagen rota.

La paridad de layout está fijada, no esperada

El parser y el layout corren en cada lado (C# para el SSR y Photon, el gemelo transpilado en el navegador) así que las matemáticas del layout son enteros y mitades exactas de principio a fin: los tamaños de nodo vienen de una estimación plana de avance de carácter, las posiciones se acumulan por suma, y el ORDEN por baricentro se decide con sumas enteras multiplicadas en cruz (sumA·countB < sumB·countA), nunca una división. El ranking es Sugiyama-lite sobre el DAG: un DFS iterativo marca las aristas que cierran un ciclo, así que una arista hacia atrás se encamina hacia arriba en lugar de inflar cada rango anterior a ella.

El fixture fijado (__fixtures__/mermaid-layout.txt, se regenera con EQ_UPDATE_MERMAID_FIXTURE=1) se afirma idéntico carácter por carácter por MermaidTests.cs y mermaid.spec.ts. Si las dos compilaciones llegaran a colocar una caja de forma distinta, una suite se rompe antes de que una página salte en la hidratación.

Las aristas se curvan

Desde 0.2.0-preview.28

Una arista de flowchart es una cúbica, la S que dibuja cada herramienta de flowcharts, trazada como un único Vector de aspecto libre, en los dos destinos. La valla que esto cierra decía "las aristas son ortogonales, las splines curvas necesitarían un nodo de ruta trazada que el vocabulario todavía no tiene": el vocabulario lo tiene ahora, y este componente fue el caso que le dio nombre. La paridad se sostiene igual que se sostiene todo lo demás aquí: la cadena de la ruta se construye con ENTEROS en los dos lados (un float formateado a través de la cultura de una máquina se lee 72,5 en la mitad de los portátiles del mundo), y el fixture fijado lleva la caja y la ruta de cada curva verbatim.

Vallas (v1, deliberadas)

• El ancho del texto es una estimación, no una medición: honesto para un diagrama, determinista en todas partes.
• Los rombos son cuadrados por construcción (un Vector dibuja dentro de una caja cuadrada); las etiquetas de decisión largas se recortan con elipsis.
• Un peldaño de anidamiento para los hermanos de los rangos de un flowchart; el AGRUPAMIENTO de subgraph se salta (las sentencias dentro se siguen parseando).