MarkNode affiche les diagrammes directement dans l’aperçu. Vous écrivez un diagramme dans un bloc de code délimité avec la syntaxe Mermaid — une manière de décrire en texte brut des organigrammes, des diagrammes de séquence, et bien plus encore — et MarkNode le dessine sous forme d’image à la place du code, entièrement hors ligne.
Écrire un diagramme
Utilisez un bloc de code délimité avec mermaid comme identifiant de langage :
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```L’aperçu remplace le bloc de code par l’organigramme rendu. La source Markdown reste inchangée — MarkNode se contente d’en dessiner une image ; si vous souhaitez modifier le diagramme, vous modifiez le texte mermaid et l’image se met à jour.
Types de diagrammes entièrement stylisés
Les organigrammes, diagrammes de séquence, diagrammes de classes et diagrammes d’états bénéficient du traitement complet de MarkNode — mis en page et composés pour s’accorder au reste de votre document, et pas seulement insérés comme une image générique.
Un diagramme de séquence, par exemple :
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
Les diagrammes de classes et d’états utilisent le même bloc mermaid avec leurs propres mots-clés Mermaid (classDiagram, stateDiagram-v2) et sont rendus avec le même niveau de finition.
Autres types de diagrammes
De nombreux autres types de diagrammes Mermaid — y compris les diagrammes circulaires et les diagrammes de Gantt — sont également rendus dans MarkNode aujourd’hui, sous forme de véritables diagrammes stylisés selon votre thème plutôt que sous forme de code. Le même niveau de finition de mise en page personnalisée dont bénéficient les organigrammes et les diagrammes de séquence, de classes et d’états est prévu pour ces types de diagrammes dans une future mise à jour.
S’accorder à votre thème
Dans l’aperçu, les diagrammes suivent le thème d’application de votre document. Changez de thème et tous les diagrammes affichés à l’écran se restylisent en même temps que le reste de l’aperçu — il n’y a rien à configurer séparément.
Les aperçus Coup d’œil suivent en revanche l’apparence claire/sombre du système de votre Mac. Les organigrammes et les diagrammes de séquence, de classes et d’états s’accordent dans les deux cas ; les diagrammes circulaires et de Gantt sont actuellement rendus avec une palette unique dans Coup d’œil.
Où les diagrammes apparaissent
Les diagrammes sont rendus sur toutes les surfaces qui affichent votre Markdown rendu :
- Le volet d’aperçu ancré
- La fenêtre d’aperçu détachée
- Coup d’œil de macOS (appuyez sur Espace sur un fichier Markdown dans le Finder — voir Aperçus Coup d’œil)
- L’export DOCX, sous forme d’image intégrée
Erreurs
Si la syntaxe Mermaid d’un diagramme comporte une erreur — un type de diagramme non reconnu, une faute de frappe dans la syntaxe — MarkNode affiche le bloc de code délimité d’origine plutôt qu’une image cassée ou vide. Le reste de votre document est rendu normalement ; seul ce bloc est affecté. Corrigez la source et le diagramme apparaîtra à la prochaine mise à jour de l’aperçu.
Syntaxe prise en charge
MarkNode suit la syntaxe propre au projet Mermaid. Pour l’éventail complet des types de diagrammes et des options, consultez la documentation officielle de Mermaid — tout ce qui y est valide est ce que MarkNode tente de rendre.