COMMENCER ICI
Premiers pas
ARCHITECTURE
Vue d'ensemble de l'architecture
Composants write-once
Surface déclarative
Architecture des paquets
Composants
Styles
Localisation
Analytics et GTM
WRITE-ONCE
Stockage
Formulaires
Markdown
Mermaid
Rendu des e-mails
COMPILATION
Résolution des types externes
RUNTIME
Runtime (TypeScript)
Performance
SERVEUR
Assets
BunPackage
Sécurité
ÉCOSYSTÈME
Image
Graphiques
Lottie
DÉVELOPPEMENT
Roadmap
DocsWrite-once
MermaidEdit this page
4 min readDepuis 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 :
flowchart, sequence
autre chose
source mermaid
grammaire connue ?
Parser + résoudre
Montrer la clôture comme du code
Boxes, Text, Vectors
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.
1
2
3
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| B
des chaînes ; les liens ouverts ne dessinent pas de pointe ; pointillé et épais se dessinent avec l'unique style de ligne
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).