EMPIEZA AQUÍ
Primeros pasos
ARQUITECTURA
Visión general de la arquitectura
Componentes write-once
Superficie declarativa
Arquitectura de paquetes
Componentes
Estilos
Localización
Analytics y GTM
WRITE-ONCE
Almacenamiento
Formularios
Markdown
Mermaid
Renderizado de email
COMPILACIÓN
Resolución de tipos externos
RUNTIME
Runtime (TypeScript)
Rendimiento
SERVIDOR
Assets
BunPackage
Seguridad
ECOSISTEMA
Image
Gráficos
Lottie
DESARROLLO
Roadmap
DocsWrite-once
MermaidEdit this page
4 min readDesde 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:
flowchart, sequence
cualquier otra cosa
fuente mermaid
gramática conocida?
Parsear + resolver
Mostrar la cerca como código
Boxes, Text, Vectors
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.
1
2
3
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| B
cadenas; los enlaces abiertos no dibujan punta; discontinuo y gruesa se dibujan con el único estilo de línea
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).