Kirjelda diagramm tekstina ja Ritemark joonistab selle otse dokumenti.
Mermaid on tekstipõhine diagrammikeel: kirjutad paar rida definitsiooni ja sellest saab pilt. Ritemark joonistab iga mermaid-keelega koodiploki redaktoris SVG-diagrammiks. Definitsioon ja diagramm on samas dokumendis ning markdown-fail jääb tavaliseks tekstiks.
Kuidas Mermaidi diagrammi lisada
Mermaidi ploki lisamiseks on kaks võimalust.
Esimene on kaldkriipsukäsk. Kirjuta dokumendis /mermaid ja vajuta Enter. Ritemark lisab koodiploki, mille keeleks on mermaid. Kirjuta diagrammi definitsioon ploki sisse.
Teine on käsitsi. Kirjuta tavaline koodiplokk ja pane keeleks mermaid:
```mermaid
flowchart LR
A[Algus] --> B[Töö] --> C[Lõpp]
```
Mõlemad annavad sama tulemuse. Kui plokis on korrektne Mermaidi süntaks, ilmub diagramm ise.
Näited kopeerimiseks
Ajajoon loetleb perioodid järjest ja igal perioodil on üks või mitu sündmust:
```mermaid
timeline
title Kursuse käivitamine
Mai : Kava valmis
Juuni : Videod salvestatud : Test koostatud
Juuli : Esimene grupp
```
Sektordiagramm vajab pealkirja ja igal real ühte nimetatud väärtust:
```mermaid
pie title Kuhu nädal läks
"Kirjutamine" : 45
"Koosolekud" : 30
"E-post" : 25
```
Kleebi kumbki dokumenti ja lülitu diagrammivaatesse, et seda joonistatuna näha.
Koodi- ja diagrammivaade
Igal Mermaidi plokil on paremas ülanurgas tööriistariba. Selle esimene nupp vahetab kahe vaate vahel: joonistatud diagramm ja lähtekood.
Muutmise ajal töötad koodivaates. Tulemuse nägemiseks lülitu diagrammivaatesse. Vahetus on kohene, salvestada ega värskendada pole vaja. Kui kirjutad teksti ja tahad ainult diagrammi näha, jäta plokk diagrammivaatesse. Kui parajasti muudad definitsiooni, jää koodivaatesse.
Diagrammivaates on samal ribal veel kolm nuppu. Copy image paneb diagrammi pildina lõikelauale, et saaksid selle kleepida slaidile või vestlusesse. Download avab salvestamise akna ja kirjutab diagrammi PNG-failina kettale. Expand avab diagrammi täisekraanil. Seal suumid Cmd+kerimisega (Windowsis Ctrl+kerimisega) või suuminuppudega ning sulged vaate Esc-klahviga. Suurt vooskeemi, mida lehe laiuses on raske lugeda, on nii kõige mugavam vaadata.
Hele ja tume teema
Mermaidi diagrammid järgivad redaktori teemat. Heledas teemas on diagrammil hele taust ja tumedad jooned, tumedas teemas tume taust ja heledamad elemendid. Midagi seadistama ei pea.
Eksport
Kui ekspordid dokumendi Wordi (.docx) või PDF-i, teeb Ritemark Mermaidi diagrammidest PNG-pildid. Eksporditud failis näeb diagramm välja samamoodi nagu redaktoris, nii et saaja näeb pilti ka siis, kui tal Mermaidi pole.
See käib ise, diagramme ei pea enne eksporti käsitsi teisendama. Alates versioonist v1.12.0 teisendab ka Google Docsi avaldamine Mermaidi diagrammid samamoodi PNG-piltideks.
Toetatud diagrammitüübid
| Diagrammi tüüp | Mida see näitab |
|---|---|
| Vooskeem (flowchart) | Protsessi samme ja suunaga nooli (LR, TB, RL, BT) |
| Jadadiagramm (sequence) | Osapoolte vahelisi sõnumeid ajas |
| Klassidiagramm (class) | Objektorienteeritud klasse ja nende seoseid |
| Olekudiagramm (state) | Olekumasinaid ja üleminekuid |
| Olemi-seose diagramm (ER) | Andmebaasi olemeid ja nende seoseid |
| Gantti diagramm (gantt) | Projekti ajakava ja ülesandeid |
| Ajajoon (timeline) | Sündmusi järjest, perioodide kaupa |
| Sektordiagramm (pie) | Osakaale tervikust |
Ritemark toetab samu diagrammitüüpe nagu Mermaidi teek. Täieliku süntaksi leiad Mermaidi ametlikust dokumentatsioonist (inglise keeles).
Kui diagramm ei ilmu
Kui Mermaidi süntaksis on viga, näitab Ritemark diagrammi asemel veateadet. Teade ütleb, mis valesti läks, et saaksid definitsiooni parandada.
Viga ei lukusta plokki. Saad ikka koodivaatesse minna ja lähtekoodi muuta. Kui süntaks on jälle korras, ilmub diagramm tavapäraselt.
Sagedased põhjused on vale nool (vooskeem vajab -->, mitte ->), sulgemata sulud ja toetamata diagrammitüüp. Kui varem töötanud diagramm äkki katki läheb, vaata üle ploki esimene rida. Keeleks peab olema täpselt mermaid, ilma lisatühikuteta.
Mermaid või draw.io?
Mermaid on tekstipõhine: kirjeldad diagrammi ja Ritemark joonistab selle. Kui tahad joonistada vabalt lõuendil ja kujundite paletiga, saab Ritemarkis alates versioonist v1.8.0 lisada markdowni ka draw.io diagramme (inglise keeles). Mermaid sobib kiireteks diagrammideks, mida on hea tekstina hoida ja versioonida. Draw.io sobib detailsete jooniste ja arhitektuuriskeemide jaoks. Ritemarkis saad kasutada mõlemat.
Seotud
- Draw.io diagrammid - joonistatud diagrammid markdownis, muudetavad täies võrguühenduseta redaktoris (inglise keeles)
- Põhiredaktor - redaktori võimalused ja kaldkriipsukäsud
- Eksport - PDF- ja Wordi eksport