Lohkokaavio
Lohkokaavio koostuu lohkoista ja liittimistä monimutkaisten järjestelmien, prosessien tai arkkitehtuurien havainnollistamiseksi. Lohkot edustavat peruskomponentteja tai toimintoja, ja liittimet näyttävät näiden komponenttien väliset suhteet tai prosessin; lohkokaaviot ovat keskeisiä monilla aloilla, kuten tekniikassa, ohjelmistokehityksessä ja prosessinhallinnassa.
Kopioi
Upotus
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
Lohkokaavion käyttötarkoitus
Lohkokaavion päätarkoitus on tarjota järjestelmästä ylätason näkymä, jotta ihmiset voivat ymmärtää ja analysoida sitä helposti uppoutumatta jokaisen komponentin monimutkaisiin yksityiskohtiin. Tämä tekee lohkokaavioista erityisen hyödyllisiä monimutkaisten järjestelmien yksinkertaistamisessa sekä järjestelmän komponenttien kokonaisrakenteen ja vuorovaikutuksen selittämisessä.
Käyttöskenaario
Lohkokaavioita käytetään laajalti eri toimialoilla ja tieteenaloilla, ja niitä käytetään pääasiassa seuraaviin:
- Ohjelmistoarkkitehtuuri: ohjelmistokehityksessä lohkokaavioita voidaan käyttää ohjelmistosovelluksen arkkitehtuurin havainnollistamiseen. Tämä sisältää sen näyttämisen, miten eri moduulit tai palvelut ovat vuorovaikutuksessa, tiedonkulun ja ylätason komponenttien vuorovaikutuksen.
- Verkkotopologiakaavio: lohkokaaviot sopivat erinomaisesti IT- ja televiestintäalan verkkoarkkitehtuurien esittämiseen. Ne voivat näyttää, miten eri verkkolaitteet ja -palvelut liittyvät toisiinsa, mukaan lukien reitittimet, kytkimet, palomuurit sekä tiedon kulku verkossa.
- Prosessivuokaavio: liiketoiminnassa ja valmistuksessa lohkokaavioita voidaan käyttää vuokaavioiden luomiseen. Nämä vuokaaviot edustavat liiketoiminta- tai valmistusprosessin eri vaiheita ja auttavat visualisoimaan vaiheiden järjestyksen, päätöspisteet ja ohjausvirran.
- Sähköjärjestelmä: insinöörit käyttävät lohkokaavioita sähköjärjestelmien ja piirien esittämiseen. Ne voivat havainnollistaa sähköjärjestelmän ylätason rakennetta, eri sähkökomponenttien välistä vuorovaikutusta sekä virran kulkua.
- Koulutustarkoitus: lohkokaavioita käytetään laajalti myös oppimateriaaleissa monimutkaisten käsitteiden ja järjestelmien selittämiseen yksinkertaistetusti. Lohkokaaviot auttavat pilkkomaan ja visualisoimaan tieteellisiä teorioita, insinööriperiaatteita ja teknisiä järjestelmiä.
Seuraavaksi perehdymme syvemmin tapoihin luoda ja käsitellä lohkokaavioita Mermaidissa, kattaen kaiken perussyntaksista edistyneeseen kokoonpanoon ja tyyleihin.
Yksinkertainen lohkokaavio
Perusrakenne
Lohkokaavio koostuu lohkoista, jotka edustavat eri entiteettejä tai komponentteja; Mermaidissa lohkoja voidaan luoda helposti yksinkertaisilla tekstimerkinnöillä. Lohkokaavion yksinkertaisin muoto voi olla sarja lohkoja ilman yhdistäviä viivoja.
Yksinkertaisen lohkokaavion esimerkki: luodaksesi yksinkertaisen lohkokaavion, jossa on kolme lohkoa merkittyinä a, b ja c, syntaksi on seuraava:
Kopioi
Upotus
block-beta
a b c
Tämä koodi luo kolme vaakasuunnassa järjestettyä lohkoa, ja jokainen lohko välistetään ja kohdistetaan automaattisesti parhaan luettavuuden saavuttamiseksi.
Määritä käytettävien sarakkeiden määrä
Monisarakkeinen kaavio
Vaikka yksinkertainen lohkokaavio on lineaarinen ja yksinkertainen, monimutkaisemmat järjestelmät voivat vaatia jäsennellyn asettelun. Mermaid sallii lohkojen järjestämisen useisiin sarakkeisiin, mikä auttaa luomaan monimutkaisempia ja yksityiskohtaisempia kaavioita.
Monisarakkeisen kaavion esimerkki: kun lohkot on jaettava useisiin sarakkeisiin, voit määrittää sarakkeiden määrän ja järjestää lohkot sen mukaisesti. Seuraavassa näytetään, miten luodaan lohkokaavio, jossa on kolme saraketta ja neljä lohkoa, joista neljäs lohko esiintyy toisella rivillä:
Kopioi
Upotus
block-beta
columns 3
a b c d
Tällä syntaksilla Mermaid järjestää lohkot a, b, c ja d kolmeen sarakkeeseen ja siirtyy tarvittaessa seuraavalle riville. Tämä ominaisuus on erityisen hyödyllinen kerrostettujen tai monitasoisten järjestelmien esittämisessä.
Edistynyt lohkokokoonpano
Mermaidin edistynyt syntaksi mahdollistaa kaaviosuunnittelun suuremmalla joustavuudella ja monimutkaisuudella, ja se mukautuu laajempaan käyttötapausten ja skenaarioiden kirjoon.
Säädä lohkon leveyttä
Ulottuu useiden sarakkeiden yli
Monimutkaisemmissa kaavioissa saatat tarvita useiden sarakkeiden yli ulottuvia lohkoja tiettyjen komponenttien korostamiseen tai suurempien entiteettien esittämiseen. Mermaid sallii lohkon leveyden säätämisen useiden sarakkeiden peittämiseksi, mikä parantaa kaavion luettavuutta ja rakennetta.
Esimerkki: luodaksesi lohkon, joka ulottuu kahden sarakkeen yli, voit määrittää kullekin lohkolle halutun leveyden:
Kopioi
Upotus
block-beta
columns 3
a["A label"] b:2 c:2 d
Tässä esimerkissä lohko, jonka merkintä on A label, vie yhden sarakkeen, kun taas lohkot b ja c ulottuvat 2 sarakkeen yli ja d sijoitetaan omaan sarakkeeseensa. Tämä lohkokoon joustavuus on ratkaisevan tärkeää järjestelmien tarkassa esittämisessä, joissa komponenteilla on erilainen merkitys tai koko.
Luo yhdistelmälohko
Sisäkkäinen lohko
Yhdistelmälohkot sallivat sisäkkäisten tai kerrostettujen järjestelmien esittämisen, joissa yksi komponentti sisältää useita alikomponentteja.
Esimerkki: yhdistelmälohkon luominen sisältää ylälohkon määrittämisen ja sitten alilohkojen sisäkkäistämisen siihen. Seuraavassa on syntaksi yhdistelmälohkon määrittämiseen, jossa on sisäkkäisiä elementtejä:
Kopioi
Upotus
block-beta
block
D
end
A["A: I am a wide one"]
Tässä syntaksissa D on alilohko, joka on sisäkkäistetty suurempaan ylälohkoon. Tämä ominaisuus on erityisen hyödyllinen monimutkaisten rakenteiden kuvaamisessa, kuten palvelin, jossa on useita palveluita, tai osasto suuremman organisaatiorakenteen sisällä.
Automaattinen sarakeleveys
Säädä leveyttä
Mermaid sallii sarakeleveyden dynaamisen säätämisen lohkojen sisällön mukaan. Sarakkeen leveys määräytyy sarakkeen leveimmän lohkon mukaan, mikä varmistaa, että kaavio pysyy tasapainoisena ja luettavana.
Esimerkki: kaaviossa, jossa on erikokoisia lohkoja, Mermaid säätää automaattisesti sarakeleveyden sopivaksi kunkin sarakkeen suurimpaan lohkoon.
Kopioi
Upotus
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
Tässä havainnollistetaan, miten Mermaid säätää dynaamisesti sarakkeen leveyttä sopivaksi leveimpään lohkoon.
Lohkojen vaakasuora yhdistäminen: kun lohkot on pinottava vaakasuunnassa, tehtävä voidaan suorittaa sarakeleveydellä. Seuraavassa on lohkokaavion syntaksi 4 lohkon luomiseksi pinottuna yhteen:
Kopioi
Upotus
block-beta
block
columns 1
a["A label"] b c d
end
Tässä esimerkissä yhdistetyn lohkon leveys mukautetaan automaattisesti suurimman alilohkon leveydeksi.
Lohkotyypit ja muodot
Mermaid-lohkokaavio ei rajoitu vakiomuotoisiin suorakaiteisiin. Mermaid tarjoaa useita lohkomuotoja, mikä mahdollistaa erityyppisten tietojen tai entiteettien yksityiskohtaisemman ja yksilöllisemmän esittämisen.
Vakiomuotoiset lohkomuodot
Pyöristetty suorakaide
Luo pyöristetty suorakaidelohko, jota voidaan käyttää pehmeämmän tai joustavamman komponentin esittämiseen:
Kopioi
Upotus
block-beta
id1("This is the text in the box")
Stadion-muoto
Stadion-muotoista lohkoa voidaan käyttää prosessisuuntautuneiden komponenttien esittämiseen:
Kopioi
Upotus
block-beta
id1(["This is the text in the box"])
Aliprosessin muoto
Käytetään aliprosessin tai sisällytetyn prosessin esittämiseen, ja se esitetään suorakaidelohkolla, jossa on kaksi pystyviivaa:
Kopioi
Upotus
block-beta
id1[["This is the text in the box"]]
Sylinteri
Sylinteri sopii erinomaisesti tietokannan tai tallennuskomponentin esittämiseen:
Kopioi
Upotus
block-beta
id1[("Database")]
Ympyrä
Ympyrää voidaan käyttää keskitetyn tai kriittisen komponentin esittämiseen:
Kopioi
Upotus
block-beta
id1(("This is the text in the circle"))
Epäsymmetrinen muoto, vinoneliö ja kuusikulmio
Päätöksiin käytetään vinoneliötä; ainutlaatuisiin tai erikoistuneisiin prosesseihin voidaan käyttää epäsymmetristä muotoa ja kuusikulmiota:
Epäsymmetrinen muoto
Kopioi
Upotus
block-beta
id1>"This is the text in the box"]
Kopioi
Upotus
block-beta
id1{"This is the text in the box"}
Kopioi
Upotus
block-beta
id1{{"This is the text in the box"}}
Suunnikas ja puolisuunnikas
Suunnikas ja puolisuunnikas sopivat erinomaisesti syöttöön/tulostukseen ja siirtymäprosesseihin
Kopioi
Upotus
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Kaksoisympyrä
Kriittisten tai korkean prioriteetin komponenttien korostamiseen kaksoisympyrän käyttö voi olla tehokasta:
Kopioi
Upotus
block-beta
id1((("This is the text in the circle")))
Nuolilohko ja tyhjä lohko
Nuolilohko
Lohkonuoli voi näyttää intuitiivisesti suunnan tai virtauksen prosessissa:
Kopioi
Upotus
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
Tyhjä lohko
Tyhjää lohkoa voidaan käyttää tyhjän tilan luomiseen, mikä on hyödyllistä asettelun ja luettavuuden kannalta:
Kopioi
Upotus
block-beta
columns 3
a space b
c d e
Kopioi
Upotus
block-beta
ida space:3 idb idc
Huomaa, että voit käyttää numeromerkkiä space:num asettamaan tyhjän lohkon varaamien sarakkeiden määrän, jossa num ilmaisee sarakeleveyden. Voit myös käyttää space-merkintää, joka on oletuksena yksi sarake.
Mermaidin vakio- ja erikoismuodot parantavat lohkokaavioiden ilmaisuvoimaa, mikä mahdollistaa tarkemman ja kontekstitietoisemman esittämisen.
Yhdistä lohkot viivoilla
Lohkokaavion keskeinen ominaisuus on kyky yhdistää yksittäisiä lohkoja erityyppisillä viivoilla tai linkeillä.
Perusyhteydet ja nuolityypit
Lohkojen yhdistämiseen tarvitaan nuolia tai viivoja. Nämä liittimet kuvaavat lohkojen välisiä suhteita tai tiedonkulkua. Mermaid tarjoaa useita nuolityyppejä erilaisiin kaaviotarpeisiin.
Peruslinkki
Luo yksinkertainen linkki, jossa on nuoli, joka näyttää suunnan tai virtauksen lohkosta toiseen:
Kopioi
Upotus
block-beta
A space B
A-->B
Tämä esimerkki havainnollistaa suoraa yhteyttä lohkosta A lohkoon B.
Linkin teksti
Lohkojen yhdistämisen lisäksi suhde on usein kuvattava tai merkittävä. Mermaid sallii tekstin lisäämisen linkkiin, mikä antaa linkille kontekstin.
Jos haluat lisätä tekstiä linkkiin, syntaksi on sisällyttää kyseinen teksti linkin määrittelyyn:
Kopioi
Upotus
block-beta
A space:2 B
A-- "X" -->B
Kopioi
Upotus
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
Tyyli ja mukautus
Lohkokaavion rakenteen ja asettelun lisäksi Mermaid tarjoaa runsaasti tyylivaihtoehtoja; näiden mukautusominaisuuksien avulla voidaan luoda visuaalisesti omaperäisempiä ja informatiivisempia kaavioita.
Yksittäisen lohkon tyyli
Mermaid voi tehdä yksityiskohtaisen tyylittelyn yksittäiselle lohkolle; voit soveltaa erilaisia CSS-ominaisuuksia, kuten väriä, ääriviivaa ja reunuksen paksuutta.
Mukauta yksittäisen lohkon tyyliä
Soveltaaksesi mukautettua tyyliä lohkoon voit käyttää style-syntaksia, jota seuraa lohkon tunniste ja halutut CSS-ominaisuudet:
Kopioi
Upotus
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Luokkatyyli
Mermaid tukee tyylien soveltamista luokkiin. Jos haluat soveltaa tiettyä tyylijoukkoa useisiin elementteihin, tyyliasettelu on helpompaa, koska sinun tarvitsee vain linkittää nämä elementit yhteen luokkaan.
Aseta tyyli yksittäiselle luokalle
Kopioi
Upotus
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Tässä määritellään luokka nimeltä blue ja sovelletaan sitä lohkoon A, kun taas lohko B saa erillisen tyylin.
Käyttötapaus
Kun Mermaid-lohkokaavion modulaarista kaaviota sovelletaan käytännön skenaarioihin, sen monipuolisuus tulee täysin esiin.
Yksityiskohtaisia esimerkkejä eri ominaisuuksista
Rakenteen, linkkien ja tyylielementtien avulla voimme luoda Mermaid-lohkokaavioita, jotka palvelevat tiettyä tarkoitusta eri tilanteissa.
Järjestelmäarkkitehtuuri
Seuraavassa on yksinkertainen ohjelmistojärjestelmän arkkitehtuuri, jossa on toisiinsa liittyviä komponentteja:
Kopioi
Upotus
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
Tämä esimerkki näyttää perusarkkitehtuurin, joka sisältää käyttöliittymän, taustajärjestelmän ja tietokannan, ja kunkin lohkon esitystapa on erilainen eri komponenttityyppien erottamiseksi.
Liiketoimintaprosessi
Seuraavassa on liiketoimintaprosessi, jossa on päätöspisteitä ja useita vaiheita:
Kopioi
Upotus
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
Nämä käytännön esimerkit korostavat Mermaid-lohkokaavioiden käytännön arvoa monimutkaisen tiedon yksinkertaistamisessa ja tehokkaassa viestinnässä eri alojen välillä.
Vianmääritys
Monimutkaisten lohkokaavioiden tekeminen Mermaid-syntaksilla on joskus haastavaa; tässä luetellaan yleiset syntaksivirheet ja tarjotaan vinkkejä monimutkaisempien kaaviorakenteiden hallintaan.
Yleiset syntaksivirheet
Yleisten syntaksivirheiden välttäminen on avainasemassa Mermaid-lohkokaavioiden sujuvassa käytössä.
Linkkivirhe
Virheellisen linkkisyntaksin käyttö voi johtaa odottamattomiin tuloksiin tai rikkoutuneeseen kaavioon:
Kopioi
Upotus
block-beta
A - B
Korjaus: varmista, että käytät nuolia (--> tai ---) oikein lohkojen yhdistämiseen yhteyden suunnan ja tyypin määrittämiseksi. Lisäksi yksi lohkokaavion perusperiaatteista on antaa tekijälle täysi hallinta lohkojen sijaintiin, joten yllä olevassa tapauksessa lohkojen väliin on lisättävä välilyönti:
Kopioi
Upotus
block-beta
A space B
A --> B
Tyylin virheellinen kohdistus
Tyylin soveltaminen väärässä kontekstissa tai virheellisellä syntaksilla voi johtaa siihen, ettei tyylittely toimi odotetusti:
Kopioi
Upotus
block-beta
A
style A fillpink;
Korjaus: varmista, että erotat tyyliominaisuudet oikein pilkulla ja käytät oikeaa CSS-ominaisuuden muotoa syntaksin korjaamiseksi:
Kopioi
Upotus
block-beta
A
style A fill:pink,stroke:#333;
