Web log de Serge Boisse
On line depuis 1992 !
Voir aussi: Markdown (tuto)
Mermaid permet de créer des diagrammes dans tes notes. Ce n'est pas un _Obsidian Plugins 🔌 mais c'est intégré de base ! C'est hyper cool !
Documentation :
https://mermaid-js.github.io/mermaid/#/
Et le Live Editor en ligne
Voir aussi un plugin qui aide à construire des graphiques mermaid
En passant, le plugin Excalidraw peut aussi afficher des graphes, mais à partir de données CSV.
Commencer le code Mermaid par trois backquotes et mermaid. finir par trois backquotes. J'ai créé un modèle T_code mermaid(lien privé)
Attention Quand on colle des exemples pris sur le web, les espaces sont souvent traduits en qui n'est pas reconnu par mermaid. Il vaut mieux coller dans notepad++ avant pour vérifier.
Mermaid est sensible à la casse. Donc "Mermaid" ne marchera pas, et "a" et "A" sont des nœuds différents...
Commencer la ligne par "%%"
cf https://mermaid-js.github.io/mermaid/#/flowchart
Code : (graph) orientation : TB,BT, LR,RL (T = top, B = bottom, L=left, R=right)
flowchart RL
A-->B
A et B sont ici les noms des nœuds. Problème, on ne peut pas mettre d'espaces dans les noms de nœuds. L'astuce, c'est de remplacer par exemple B par B[super ordi] : en fait, ça crée un nouveau noeud mais on s'en tape.
flowchart RL
A --> B["super ordi "HAL♥""]
B --calcul--> B
Noter comment j'ai affiché les quotes et le ♥
On peut changer la forme des Noeuds :
https://mermaid-js.github.io/mermaid/#/flowchart?id=node-shapes
flowchart LR
A[normal]
boiteB(arrondi)
C([stade])
D[(database)]
E{triangle}
F{{hexagone}}
G((cercle))
A-->boiteB---C & D---E
F<-->G
Etc... Dans le code le C & D est une seule entité, il faut imaginer des parenthèses autour (mais ça causerait une erreur !)
et définir a forme des liens : attention, seulement pour flowchart
https://mermaid-js.github.io/mermaid/#/flowchart?id=links-between-nodes
--- will render a solid line without arrow--> will render a dotted line without arrow->> will render a solid line with arrowhead-->> will render a dotted line with arrowhead-x will render a solid line with a cross at the end (async)--x will render a dotted line with a cross at the end (async)Code :
graph LR
A[Christmas] -->|Get money| B(Go shopping)
B -.-> C{Let me think}
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C --->|Three| F[fa:fa-car]
J'ai pas compris le fa:fa-car en fait ça semble lié à FontAwesome mais ça ne marche pas...
cf https://mermaid-js.github.io/mermaid/#/stateDiagram
exemple simple : (ça pourrait être une machine de Turing !)
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
sequenceDiagram
participant Alice
Alice ->>John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>Alice: I feel great!
(bizarrement les flèches n'apparaissent pas toujours si on a deux panneaux ouverts sur la même note)
Les "+" et "-" servent à activer /désactiver les participants ou acteurs
Autre exemple :
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Code :
pie
title utilisateurs
"mobile": 50
"desktop": 40
"tablets": 10
Code :
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task: a1, 2014-01-01, 30d
Another task: after a1, 20d
section Another
Seconde tâche: 2014-01-12, 12d
another task: 24d
Attention, ne jamais mettre d'espace avant "," ou ":"
Code Mermaid :
flowchart TB
subgraph ide1[one]
a1-->a2
end
c1-->a2
style
Code mermaid :
graph LR
%% styles (a voir:utiliser les classes)
style A fill:#88f
style A color:#fff;
style B fill:#cfc
%% le graphe
A-->B
Autres exemples :
https://mermaid-js.github.io/mermaid/#/examples
https://forum.obsidian.md/t/obsidian-links-in-mermaid/2965/9
Code :
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 0: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Plus d'explications ici : https://newdevsguide.com/2023/04/12/user-journey-maps-mermaid/
En cliquant sur "mon Site" on ouvre la page web.
graph LR
A[mon site]==>B-->C
click A "http://sboisse.free.fr/index.php" "mon site";
Error parsing Mermaid diagram!
URL.canParse is not a functionCode qui permet de mettre des liens obsidian dans un graphe mermaid : Tout le truc est dans la classe !
graph LR
A[mermaid] --> B
class A internal-link;
Dans _Obsidian Plugins 🔌
il faut ajouter le snippet CSS suivant dans le répertoire .obsidian/snippets :
/* positionne la largeur mini et maxi des graphiques mermaid et permet de zoomer*/
.mermaid {
overflow: scroll;
>svg {
transition: max-width 0.5s;
min-width: 250px;
max-width: 720px;
height: auto;
}
&:hover>svg {
max-width: 250%;
}
}
Ainsi les graphes pourront tous être vus, même les très grands !
Code Mermaid :
Un site avec plein d'exemples : PlantUML vs Mermaid (page web)
https://www.reddit.com/r/ObsidianMD/comments/10jco4p/mermaid_tools_improved_mermaidjs_experience_in/
et https://github.com/dartungar/obsidian-mermaid
Commentaires (0) :
Page :Ajouter un commentaire (pas besoin de s'enregistrer)
En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.