Flowchart Mermaid en diagramme modifiable

Comment ça marche

1. 01

   Collez votre code Mermaid

   Du code tiré d’un fichier Markdown, d’un README ou d’un chat d’IA. Un bloc de code mermaid autour et un bloc de configuration en tête sont acceptés.

2. 02

   Voyez un diagramme modifiable

   Les nœuds du diagramme de flux deviennent des formes comme processus, décision et document, les sous-graphes deviennent des cadres, et les entités ER des cartes de table.

3. 03

   Ouvrez-le dans Archboard

   Enregistrez-le comme nouveau diagramme pour déplacer et restyler les formes, ajouter des notes, partager un lien ou l’exporter en SVG et PNG. Un compte Google ou GitHub suffit pour s’inscrire.

Ce qui est dessiné à partir du code Mermaid

Ces parties de votre code deviennent des éléments de diagramme modifiables :

• flowchartgraph

  Les diagrammes flowchart et graph, flowchart-elk compris, avec chaque nœud et son libellé. Les préfixes Font Awesome comme fa:fa-car sont retirés des libellés.

• @{ shape }

  Les formes des nœuds, écrites avec des crochets ou la nouvelle syntaxe de formes, correspondent à des éléments de diagramme de flux : processus, décision, début et fin, données, document, préparation, saisie manuelle et connecteur. Les formes sans équivalent deviennent la forme de base la plus proche, comme un cylindre, ou une boîte de processus.

• subgraph

  Les sous-graphes sous forme de cadres autour de leurs nœuds, sous-graphes imbriqués compris. Un sous-graphe vide est laissé de côté.

• -->-.->==>

  Les flèches avec leurs libellés, pleines, pointillées ou épaisses, y compris les chaînes comme A --> B --> C et les embranchements comme A --> B & C.

• erDiagram

  Les entités erDiagram sous forme de cartes de table qui listent chaque attribut avec son type et sa clé PK, FK ou UK, et les relations avec leur cardinalité. Les relations non identifiantes sont en pointillés.

• TDLR

  La direction du diagramme de flux, TD, TB, LR, RL ou BT, fixe le sens dans lequel il se lit.

Types de diagrammes Mermaid pris en charge

Les diagrammes de flux (flowchart et graph) et les diagrammes entité-association (erDiagram) sont convertis aujourd’hui. sequenceDiagram, classDiagram, stateDiagram, gantt, pie, mindmap, timeline, gitGraph et les types plus récents ne sont pas encore convertis : l’outil indique le type trouvé au lieu de dessiner un mauvais diagramme de flux.

Ce qu’un import Mermaid laisse de côté

• Les diagrammes de séquence, de classes, d’états et de Gantt, les camemberts, les cartes mentales et les autres types. Seuls les diagrammes de flux et les diagrammes ER sont convertis pour l’instant.
• Les couleurs et polices de classDef, style, linkStyle et class : le diagramme démarre avec les styles d’Archboard, que vous pouvez changer sur le canevas.
• Les icônes et images des nœuds : les réglages icon et img sont ignorés, et le libellé est conservé.
• Un lien vivant avec votre code : modifier le canevas ne change pas le code Mermaid, et les modifications ultérieures du code ne mettent pas le diagramme à jour.