Mermaid fr

Mermaid

🌐 Cette page en : English · Português · Español · Français · Deutsch

Depuis 0.2.0-preview.26

Mermaid, dessiné par le design system : pas de mermaid.js, pas de document SVG, pas de rendu spécifique à la cible. Un diagramme n'est que de l'UI de plus : les nœuds sont des Boxes sur les tokens de surface du thème, le losange de décision est un Vector à chemin unique (le même vecteur que les icônes de porte utilisent sur les deux cibles), chaque arête est UN Vector cubique tracé avec une pointe de flèche vectorielle, les libellés sont des Text. Un arbre, réalisé par le réalisateur web et par Photon, thémé par l'IAppTheme de l'application elle-même.

Dans Markdown c'est automatique (une clôture ```mermaid se rend comme le diagramme) et Mermaid(source) fonctionne seul. Cette page porte sa propre preuve :

graph TD
  A[source mermaid] --> B{grammaire connue ?}
  B -->|flowchart, sequence| C(Parser + résoudre)
  B -->|autre chose| D[Montrer la clôture comme du code]
  C --> E((Boxes, Text, Vectors))

Loading

GitHub dessine la clôture ci-dessus avec mermaid.js ; le site de documentation dessine la MÊME clôture avec le composant propre au SDK : deux rendus, une source, et c'est exactement l'enjeu.

Mermaid(source)                       // seul

Markdown(chatAnswer)                  // une clôture ```mermaid à l'intérieur se rend nativement

La grammaire v1

Parlé	Notes
graph TD / graph TB / flowchart LR	les deux axes de flux ; BT/RL retombent
A[rect], A(rounded), A((circle)), A{diamond}	les libellés entre guillemets perdent leurs guillemets
A --> B --> C, A --- B, `A -->	label
sequenceDiagram, participant A as Alice	les messages déclarent d'eux-mêmes les participants non vus
A->>B: text, A-->>B: text, messages à soi-même	un message à soi-même boucle vers l'extérieur et revient
commentaires %%, subgraph/end, style, click, notes	sautés, jamais fatals, et le graphe se dessine quand même

Élégant par contrat : une grammaire hors du sous-ensemble (gantt, classDiagram, state, pie) se rend comme le code clôturé dont elle vient, donc une réponse de chat avec un diagramme exotique dégrade vers quelque chose de vrai, jamais vers une image cassée.

La parité de layout est épinglée, pas espérée

Le parseur et le layout tournent de chaque côté (du C# pour le SSR et Photon, le jumeau transpilé dans le navigateur) si bien que les maths du layout sont des entiers et des moitiés exactes de bout en bout : les tailles de nœuds viennent d'une estimation plate d'avance de caractère, les positions s'accumulent par addition, et l'ORDRE par barycentre est décidé par des sommes entières multipliées en croix (sumA·countB < sumB·countA), jamais par une division. Le rang est du Sugiyama-lite sur le DAG : un DFS itératif marque les arêtes qui ferment un cycle, donc une arête arrière se route vers le haut au lieu de gonfler chaque rang avant elle.

La fixture épinglée (__fixtures__/mermaid-layout.txt, à régénérer avec EQ_UPDATE_MERMAID_FIXTURE=1) est affirmée identique caractère pour caractère par MermaidTests.cs et mermaid.spec.ts. Si les deux compilations plaçaient un jour une boîte différemment, une suite casse avant qu'une page ne saute à l'hydratation.

Les arêtes se courbent

Depuis 0.2.0-preview.28

Une arête de flowchart est une cubique, le S que dessine chaque outil de flowchart, tracée comme un seul Vector à aspect libre, sur les deux cibles. La limite que cela ferme disait "les arêtes sont orthogonales, les splines courbes demanderaient un nœud de chemin tracé que le vocabulaire n'a pas encore" : le vocabulaire l'a maintenant, et ce composant est le cas qui l'a nommé. La parité tient comme tout le reste tient ici : la chaîne du chemin est construite à partir d'ENTIERS des deux côtés (un float formaté via la culture d'une machine se lit 72,5 sur la moitié des portables du monde), et la fixture épinglée porte la boîte et le chemin de chaque courbe mot pour mot.

Limites (v1, délibérées)

• La largeur du texte est une estimation, pas une mesure : honnête pour un diagramme, déterministe partout.
• Les losanges sont carrés par construction (un Vector dessine dans une boîte carrée) ; les longs libellés de décision sont tronqués par des points de suspension.
• Un cran d'imbrication pour les voisins des rangs d'un flowchart ; le GROUPEMENT par subgraph est sauté (les instructions à l'intérieur se parsent quand même).