ProHoster > Blog > Utongi > Network dhayagiramu sekodhi / Network dhayagiramu sekodhi

Network dhayagiramu sekodhi / Network dhayagiramu sekodhi

Mumakore mashoma apfuura ndave kunyanya kubatanidzwa mune zvinyorwa. Kunyora chinyorwa chinotsanangura nezve mashandiro eimwe sisitimu kunowanzo kuve nyore. Kudhirowa dhayagiramu icharatidza zvese zvakakosha zvinhu uye kubatana pakati pezvinhu izvi zvakare nyore.

Asi chinonyanya kunetsa ndechekuchengeta magwaro aya achienderana. Uye zvinyorwa zvinenge zvakanaka, asi madhayagiramu... Nokuti... zvinyorwa zvese zviri online, i.e. mu html format, ipapo zvinyorwa zvinoperekedzwa nemifananidzo ye gif/jpeg/png, iyo inonyatsoratidza madhayagiramu. Uye madhayagiramu anodhirowewa muzvirongwa zvakasiyana seVisio kana online masevhisi a la draw.io. Wobva waendesa kunze dhayagiramu mune graphic fomati uye woibatanidza kune html. Zviri nyore.

Dambudziko nderei?

Zvirongwa zvinowanzova nyore. Zvakanyanya, kwete zvakanyanya kuoma. Hongu, nhamba yezvinhu ndeye gumi nemaviri kana maviri, nhamba yekubatanidza inenge yakafanana. Kuwedzera masiginecha, mamwe mazita. Zvirongwa zviri nyore zvinogona kutsanangurwa mumashoko, asi zvakanyanya kuoma, ahem ... (c) "havazonzwisisa, changamire." Kune zvirongwa zvakawanda, shanduko dzinoda kuitwa kwavari nguva nenguva, episodically, i.e. nguva dzose, nokuti vanotevera kuvandudzwa kwezvinhu zvedu.

Unogona kupinza iyo html yesevhisi. Wakambozviedza here?

Hongu chokwadi. Semuenzaniso, ini ndinoda magiraidhi kubva kugliffy.com. Asi kuti uite shanduko, unofanirwa kuenda kune yechitatu-bato sevhisi uye kugadzirisa ipapo. Uye zvakanyanya kuoma kupa zvigadziriso kune waunoshanda naye.

Chii chandinofanira kuita?

Nguva pfupi yadarika ndakawana repository paGithub mune zvinokurudzirwa github.com/RaoulMeyer/diagram-as-code. Dhiagiramu sekodhi. Avo. tinotsanangura dunhu ratinoda mujs. Isu tinonyora iyi js zvakananga mune imwecheteyo html pane mamwe zvinyorwa zvinyorwa.

Nenzira, ini ndinonyora zvinyorwa kwete zvachose muhtml. Kazhinji, zvinyorwa seti yemafaira ane markdown mavara, ayo anozoshandurwa kuita yakazara-yakazara zvinyorwa saiti neimwe injini, semuenzaniso wintersmith. Kana kuti wiki system.

Zvinoitika zvakanyanya nyore: isu takanyora zvinyorwa, ipapo script tag inovhura uye iyo JS kodhi yechirongwa inotsanangurwa mairi.

Chii futi?

Ini ndaifarira iyi repository, asi uyu hausi iwo chete muenzaniso apo dhayagiramu inodhirowa uchishandisa kodhi kana chinyorwa chinomiririra. (Pakupera kwechinyorwa kuchave nezvinongedzo kumapurojekiti uye zvinyorwa zvandakadyisa paGoogle padhiyagiramu yemusoro sekodhi.)

Uye handisi ndega ndinogadzirisa zvinyorwa. Dzimwe nguva vatinoshanda navo vanopawo - gadzirisa izwi, shandura tsananguro, isa mifananidzo mitsva. 

Naizvozvo, ndinoda kuona dhayagiramu mune inoverengeka, inonzwisisika mavara manyorerwo ayo asingazode yekudzidza kwenguva refu. Uye mune dzimwe nzvimbo unogona kukopa-namira kuti ukurumidze kuwedzera dunhu idzva. 

Uye mumwe waanoshanda naye akacherechedza kuti kodhi, hongu, yakanaka, asi kana ukashandisa chimiro, zvese zvinogona kuomarara uye kutaura.

Nokudaro, ndakaedza kufungidzira dhayagiramu seti yezvikamu zviduku zvishoma zvinotsanangura nodes, kubatanidza, mapoka emanodhi, pamwe chete nenzvimbo yemanodhi. Zvakazoitika, mumaonero angu akazvininipisa, zviri nyore, kunyangwe, hongu, kuravira uye ruvara ...

Iyi ichati sei muhurongwa?

  • Node imwe neimwe inotsanangurwa nechiziviso chinozivisa node.
  • Iwe unogona zvakare kuwedzera icon kune node uye kuwedzera chinyorwa.
  • Iwe unogona kutsanangura hukama pakati pe node mbiri.
  • Nokuda kwekukurukurirana pamufananidzo, unogona kuisa ruvara uye kunyora.
  • Hunhu hwekutaurirana hunotsanangurwa sekubva kunobva kune chinangwa. Uye kunobva uye chinangwa zvinoratidzwa nenode identifiers.
  • Node imwe kana kupfuura inogona kuwedzerwa kuboka.
  • Hukama hunogonawo kutsanangurwa zvese kubva muboka uye kuboka.

Tichishandisa mitemo iyi iri nyore, tinowana mufananidzo unotevera. Just? Quite.

Network dhayagiramu sekodhi / Network dhayagiramu sekodhi

Uye inotsanangurwa neinotevera js kodhi. Chinhu chikuru apa ndicho chinhu chezvikamu. Imo ma nodes anoratidzwa - nodes, edges - kubatanidza.
 

  const elements = {
    nodes: [       // описываСм ΡƒΠ·Π»Ρ‹
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [       // ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ связи
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme1', elements);

Ehe, ini handina kuuya nekudhirowa kwedunhu ini, asi ndakashandisa raibhurari cytoscape.js chishandiso chine simba kwazvo chekuona. Ini ndinongoshandisa chidimbu chezvinobvira mumhinduro yangu. 

Zvakanaka, uyu muenzaniso wakapfava. Zvinganyanya kuoma here?

Hongu. Kuratidza zvinzvimbo, tinoshandisa zvinzvimbo, kuratidza mapoka, tinoratidza rondedzero yemapoka mumapoka, uye zvinhu pachazvo zvine hunhu hweboka.

Network dhayagiramu sekodhi / Network dhayagiramu sekodhi

Uye iyi ndiyo kodhi:

<div id="scheme5" style="height:500px;width:800px;"></div>
<script>
  const elements5 = {
    groups: [
      { id: 'g1', label: 'Π“Ρ€ΡƒΠΏΠΏΠ° сСрвисов 1'},
      { id: 'g2', label: 'Π“Ρ€ΡƒΠΏΠΏΠ° сСрвисов 2'},
    ],
    nodes: [
      { id: 'man1', type: 'person', label: 'Π§Π΅Π»ΠΎΠ²Π΅ΠΊ'},
      { id: 'client', type: 'smartphone', label: 'Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½'},
      { id: 'agent-backend', type: 'server', group: 'g1', label: 'agent-backend'},
      { id: 'web', type: 'server', group: 'g1', label: 'ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ admin'},
      { id: 'www', type: 'server', group: 'g1', label: 'страница Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ'},
      { id: 'mongodb1', type: 'database', group: 'g1', label: 'Mongo DB 1'},
      { id: 'mongodb2', type: 'database', group: 'g1', label: 'Mongo DB 2'},
      { id: 'runner-integration1', type: 'worker', group: 'g1', label: 'ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ°'},
      { id: 'runner-integration2', type: 'worker', group: 'g1', label: 'ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ°'},
      { id: 'api', type: 'server', group: 'g1', label: 'API'},
      { id: 'server2', type: 'server', group:'g2', label: 'сСрвСр'},
      { id: 'otherServer', type: 'server', group:'g2', label: 'сСрвСр'},
      { id: 'firebase', type: 'cloud', label: 'Google Firebase'},
    ],
    edges: [
      { source: 'client', target: 'agent-backend', label: 'json', color: 'red' },
      { source: 'agent-backend', target: 'mongodb1', color: 'red' },
      { source: 'agent-backend', target: 'mongodb2',  color: 'red' },
      { source: 'mongodb1', target: 'runner-integration1', label: 'Π΄Π°Π½Π½Ρ‹Π΅' },
      { source: 'mongodb2', target: 'runner-integration2', label: 'Π΄Π°Π½Π½Ρ‹Π΅' },
      { source: 'mongodb1', target: 'web', label: 'Π΄Π°Π½Π½Ρ‹Π΅ для отобраТСния' },
      { source: 'runner-integration1', target: 'server2', label: 'Π΄Π°Π½Π½Ρ‹Π΅' },
      { source: 'runner-integration2', target: 'otherServer', label: 'Π΄Π°Π½Π½Ρ‹Π΅' },
      { source: 'api', target: 'firebase', label: 'запросы', color: 'blue', },
      { source: 'firebase', target: 'client', label: 'push', color: 'blue'},
      { source: 'server2', target: 'api', label: 'увСдомлСния', color: 'blue'},
      { source: 'man1', target: 'client', },
    ],
    positions: [
      { id: 'client', row: 2, col: 1,},
      { id: 'agent-backend', row: 2, col: 3,},
      { id: 'web', row: 6, col: 3,},
      { id: 'www', row: 1, col: 3,},
      { id: 'mongodb1', row: 1, col: 4,},
      { id: 'mongodb2', row: 2, col: 5,},
      { id: 'runner-integration1', row: 3, col: 3,},
      { id: 'runner-integration2', row: 4, col: 3,},
      { id: 'api', row: 5, col: 3,},
      { id: 'server2', row: 6, col: 7,},
      { id: 'otherServer', row: 4, col: 7,},
      { id: 'firebase', row: 5, col: 1,},
      { id: 'logger', row: 2, col: 7,},
      { id: 'crm', row: 5, col: 8,},
    ],
};
  Diagram('scheme5', elements5, {layout: 'grid'});
</script>

Kune rimwe divi, chirongwa chakadaro chingangoita akati wandei masikirini ekodhi palaptop, kune rumwe rutivi, chimiro a la json chinokubvumira kuzadza data rese nekuenzanisa, nekukurumidza uye iwe unogona kukopa-namira.

Sei zvinzvimbo zvakaiswa zvakasiyana kubva node?

Inonyanya kugadzikana. Kutanga tinotsanangura nodes. Ipapo tinogona kutsanangura mapoka akati wandei toaratidza mumanodhi. Zvadaro tinosarudza zvisungo. Uye chete ipapo, apo zvinhu zvikuru uye zvibatanidza pakati pavo zviripo, tinotora nzvimbo yezvinhu izvi pamufananidzo. Kana zvakasiyana.

Zvinoita here pasina zvigaro?

Zvinogoneka pasina zvigaro. Asi ichave yakaunyana zvishoma; iwe unogona kuona iyi sarudzo mumienzaniso. Izvi zvinokonzerwa nekuti kune algorithm yenzvimbo yemanodhi e cytoscape fcose, iyo inofungawo kuvapo kwemapoka. Kutsanangura zvinzvimbo kunoita kuti dhayagiramu iwedzere kudzoreka, asi padanho rekutanga dhizaini zvinogoneka pasina zvinzvimbo.

Zvinzvimbo zvinogona zvakare kutsanangurwa muBattleship maitiro. Avo. imwe node iri muA1, uye imwe mud5. Zvinonyanya kubatsira kuti cytoscape inoita kuti zvinhu zviri pajirasi zvifambe, i.e. tinokwanisa kuvafambisa-famba, toona sarudzo dzakasiyana dzemarongerwo, uye tozogadzirisa kurongeka kwezvinhu zvatinoda mukodhi.

Kazhinji, zvinonzwisisika. Unogonawo kuedza?
 
Zvechokwadi, kuti ndikurumidze kugadzira matunhu, ndakazviita mudiki mupepeti, iyo pachayo inogadziridza schema uye inochengeta yazvino vhezheni mubrowser (munzvimbo yekuchengetedza).

Wakambozviedza here? Iwe unogona ikozvino kuwedzera kune peji rako.

Zvino zvakare:

1. Kubatanidza script

<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>

2. Wedzera kodhi kuhtml

<div id="scheme1" style="height:300px;width:800px;"></div>
<script>      
  const elements = {    
    nodes: [
      { id: 'client', type: 'smartphone', label: 'Mobile App'},
      { id: 'server', type: 'server', label: 'Main Server'},
      { id: 'db1', type: 'database', label: 'DB 1'},
      { id: 'db2', type: 'database', label: 'DB 2'},
    ],
    edges: [
      { source: 'client', target: 'server', label: 'request' },
      { source: 'server', target: 'db1', label: 'request' },
      { source: 'server', target: 'db2', label: 'request' },
    ],
  };
  Diagram('scheme1', elements);
</script>

3. tinogadzirisa kodhi kudhiyagiramu yatinoda (ndinofunga zviri nyore pane kudhirowa zizi :)

Mamwe mashoko pa peji yeprojekiti pa github.

Chii mumagumo?

Ndakazadzisa zvinangwa zvangu - kuwedzera inline dhayagiramu kune zvinyorwa, iyo fomati iri nyore uye inonzwisisika. Haina kukodzera maseketi epamusoro, asi kumaseketi madiki anotsanangura chimiro chekubatanidza, zvakanaka chose. Iwe unogona kugara uchikurumidza kugadzirisa uye kuchinja chimwe chinhu nekufamba kwenguva. Ehe, uye vatinoshanda navo vanogona kugadzirisa chimwe chinhu muchiteshi ivo pachavo, zvinyorwa zvinyorwa zvezvinhu, pasina kudzidziswa kwakakosha))

Chii chinogona kuvandudzwa?

Pane, hongu, zvakawanda zvingasarudzwa pano. Wedzera mamwe ma icons (ese aripo anowedzerwa inline kune script). Sarudza imwe inonyatsoratidza seti yezvidhori. Ita kuti zvikwanise kutsanangura maitiro emutsara wekubatanidza. Wedzera mufananidzo wekumashure.

Unofungei?
 
Ini ndatove nemazano akati wandei ekuita mune nyaya, iwe unogona zvakare kuwedzera ako mune zvakataurwa.

Mhinduro yangu inoshanda mune yakamanikana yematambudziko, uye pamwe iwe uchawana chiri nyore chishandiso chekudhirowa madhayagiramu nekungoanyora - sezvavanoti 'ndiratidze dhiyagiramu yako sekodhi'

  1. Sarudzo yakanaka
  2. Basa guru (9 marudzi emachati online edhita)
  3. Chokwadi, mermaid.js
  4. Uye kana iwe uchida yakanyanya kutsanangurwa uye yakaoma madhayagiramu, saka iwe zvechokwadi uchayemura chirongwa ichi: go.drawthe.net

Source: www.habr.com

Voeg