I-ProHoster > Π‘Π»ΠΎΠ³ > Ukuphatha > Umdwebo wenethiwekhi njengekhodi / idayagramu yenethiwekhi njengekhodi

Umdwebo wenethiwekhi njengekhodi / idayagramu yenethiwekhi njengekhodi

Eminyakeni embalwa edlule ngibambe iqhaza kakhulu ekubhalweni. Ukubhala umbhalo ochazayo mayelana nendlela isistimu ethile esebenza ngayo ngokuvamile kulula kakhulu. Ukudweba umdwebo ozoveza zonke izinto ezibalulekile kanye nokuxhumana phakathi kwalezi zinto nakho kulula kakhulu.

Kodwa isici esiyinkinga kakhulu ukugcina lo mbhalo usesikhathini samanje. Futhi umbhalo uzobe ulungile, kodwa imidwebo... Ngoba... wonke amadokhumenti aku-inthanethi, i.e. ngefomethi ye-html, umbhalo bese uhambisana nezithombe ze-gif/jpeg/png, ezibonisa imidwebo. Futhi imidwebo idwetshwa ezinhlelweni ezahlukahlukene ezifana ne-Visio noma izinsiza eziku-inthanethi i-la draw.io. Bese ukhipha umdwebo kufomethi yesithombe bese uwunamathisela ku-html. Kulula.

Yini inkinga?

Izikimu ngokuvamile zilula. Ngokunembayo, hhayi inkimbinkimbi kakhulu. Yebo, inani lezinto liyishumi nambili noma ezimbili, inani lokuxhumana licishe lifane. Amasiginesha angeziwe, amagama athile. Amacebo alula angachazwa ngamagama, kodwa ayinkimbinkimbi kakhulu, ahem... (c) β€œngeke baqonde, mnumzane.” Kunezinhlelo eziningi, izinguquko zidinga ukwenziwa kuzo ngezikhathi ezithile, ngezikhathi ezithile, i.e. njalo, ngoba balandela ukuthuthukiswa kwemikhiqizo yethu.

Ungakwazi ukushumeka i-html yesevisi. Uke wakuzama?

Yebo, impela. Isibonelo, ngithanda izithombe ezivela ku-gliffy.com. Kodwa ukuze wenze izinguquko, udinga ukuya kusevisi yenkampani yangaphandle futhi uhlele lapho. Futhi kunzima kakhulu ukunikeza izilungiso kozakwenu.

Yini okufanele ngiyenze?

Muva nje ngithole indawo yokugcina ku-Github ezincomweni github.com/RaoulMeyer/diagram-as-code. Umdwebo njengekhodi. Labo. sichaza isekethe esiyidingayo ku-js. Sibhala le js ngqo ku-html efanayo lapho omunye umbhalo wemibhalo ukhona.

Kodwa-ke, ngibhala imibhalo hhayi ku-html ngokuphelele. Ngokuvamile, imibhalo iqoqo lamafayela anombhalo we-markdown, abese eguqulwa abe isayithi lamadokhumenti eligcwele yinjini ethile, isibonelo i-wintersmith. Noma isistimu ye-wiki.

Kuvele kube lula kakhulu: sibhale umbhalo, bese kuvuleka ithegi yeskripthi futhi ikhodi ye-JS yohlelo ichazwe kuyo.

Kwenzenjani futhi?

Ngiyithandile le nqolobane, kodwa lesi akusona ukuphela kwesibonelo lapho umdwebo udwetshwa kusetshenziswa ikhodi noma ukumelwa kombhalo. (Ekugcineni kwesihloko kuzoba nezixhumanisi zamaphrojekthi nezindatshana engizisebenzise ku-Google kumdwebo wesihloko njengekhodi.)

Futhi akumina ngedwa ohlela amadokhumenti. Kwesinye isikhathi ozakwethu nabo banomthelela - lungisa igama, shintsha incazelo, faka izithombe ezintsha. 

Ngakho-ke, ngingathanda ukubona umdwebo ngefomethi yombhalo efundekayo, eqondakalayo engeke idinge ijika lokufunda elide. Futhi kwezinye izindawo ungamane ukopishe-unamathisele ukusheshisa ukungeza isekethe entsha. 

Futhi omunye uzakwethu waphawula ukuthi ikhodi, yebo, inhle, kodwa uma usebenzisa isakhiwo, yonke into ingaba eqinile futhi icacise.

Ngakho-ke, ngizame ukucabanga umdwebo njengeqoqo lezinhlaka ezimbalwa ezincane ezichaza ama-node, ukuxhumana, amaqembu ama-node, kanye nendawo yama-node. Kwavela, ngokombono wami othobekile, kulula kakhulu, nakuba, kunjalo, ukunambitheka nombala ...

Leli shadi linjani kumalungu afanayo?

  • I-node ngayinye ichazwa yisihlonzi esikhomba ngokukhethekile indawo.
  • Ungakwazi futhi ukwengeza isithonjana endaweni bese wengeza umbhalo.
  • Ungacacisa ubudlelwano phakathi kwamanodi amabili.
  • Ukuze uxhumane nomdwebo, ungasetha umbala nombhalo.
  • Inkombandlela yokuxhumana ichazwa ngokuthi ukusuka emthonjeni kuya ekuqondisweni. Futhi umthombo nethagethi kukhonjiswa ngezihlonzi zenodi.
  • Inodi eyodwa noma ngaphezulu angengezwa eqenjini.
  • Ubudlelwano bungabuye bucaciswe kokubili eqenjini naseqenjini.

Ngokusebenzisa le mithetho elula, sithola umdwebo olandelayo. Nje? Impela.

Umdwebo wenethiwekhi njengekhodi / idayagramu yenethiwekhi njengekhodi

Futhi ichazwa yikhodi elandelayo ye-js. Into esemqoka lapha into yezakhi. Lapho kuboniswa khona ama-node - ama-node, imiphetho - ukuxhumana.
 

  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);

Vele, angizange ngiqhamuke nomdwebo wesekethe ngokwami, kodwa ngisebenzise umtapo wezincwadi cytoscape.js iyithuluzi elinamandla lokubonisa ngeso. Ngisebenzisa ingxenye encane kuphela yamathuba esixazululweni sami. 

Kulungile, lesi isibonelo esilula. Kungaba nzima kakhulu?

Yebo ngiyacela. Ukukhombisa izikhundla, sisebenzisa izikhundla, ukukhombisa amaqembu, sibonisa uhlu lwamaqembu ngamaqembu, futhi izakhi ngokwazo zinemfanelo yeqembu.

Umdwebo wenethiwekhi njengekhodi / idayagramu yenethiwekhi njengekhodi

Futhi nansi ikhodi:

<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>

Ngakolunye uhlangothi, uhlelo olunjalo cishe luyizikrini ezimbalwa zekhodi ku-laptop, ngakolunye uhlangothi, isakhiwo se-la json sikuvumela ukuthi ugcwalise yonke idatha ngokufanisa, ngokushesha futhi ungakwazi ukukopisha-unamathisele.

Kungani izikhundla zibekwe ngokwehlukana namanodi?

Ikhululekile. Okokuqala sicacisa ama-node. Khona-ke singacacisa amaqembu ambalwa futhi siwabonise ngamanodi. Bese siqoka izixhumanisi. Futhi kuphela lapho, lapho izinto eziyinhloko nokuxhumana phakathi kwazo kukhona, sithatha indawo yalezi zinto emdwebeni. Noma ngokuphambene.

Kungenzeka yini ngaphandle kwezikhundla?

Kuyenzeka ngaphandle kwezikhundla. Kodwa izoba shwabene kancane; ungabona le nketho ezibonelweni. Lokhu kungenxa yokuthi kune-algorithm yendawo yama-node e-cytoscape fcose, ebuye icabangele ukuba khona kwamaqembu. Ukucacisa izikhundla kwenza umdwebo ulawuleke kakhulu, kodwa esigabeni sokusalungiswa kokuqala komdwebo kungenzeka ngaphandle kwezikhundla.

Izikhundla zingacaciswa nangesitayela se-Battleship. Labo. inodi eyodwa iku-a1, kanti enye iku-d5. Isiza ikakhulukazi ukuthi i-cytoscape yenza izinto eziseseyili zinyakaze, i.e. singawahambisa nxazonke, sibone izinketho ezahlukene zesakhiwo, bese silungisa ukuhlelwa kwezinto esizithandayo kukhodi.

Ngokuvamile, kuyaqondakala. Ungakwazi futhi ukuzama?
 
Yiqiniso, ukudala ngokushesha ama-circuits, ngizenzele encane umhleli, yona ngokwayo ebuyekeza i-schema futhi igcine inguqulo yakamuva kusiphequluli (eSitorejini sasendaweni).

Uke wakuzama? Manje ungayengeza ekhasini lakho.

Bese futhi:

1. Ixhuma umbhalo

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

2. Engeza ikhodi ku-html

<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. sihlela ikhodi kumdwebo esiwudingayo (ngicabanga ukuthi kulula kunokudweba isikhova :)

Imininingwane eminingi ku ikhasi lephrojekthi ku github.

Yini ekugcineni?

Ngifinyelele izinhloso zami - ukwengeza imidwebo esemgqeni emibhalweni, ifomethi ilula futhi iyaqondakala. Ayilungele ama-super circuits, kodwa kumasekhethi amancane achaza ukwakheka kokuxhumana, kulungile ngokuphelele. Ungahlala ulungisa ngokushesha futhi ushintshe okuthile ngokuhamba kwesikhathi. Yebo, nozakwethu bangalungisa okuthile edokhi ngokwabo, okungenani amazwibela ezinto, ngaphandle kokuqeqeshwa okukhethekile))

Yini engathuthukiswa?

Yebo, kunezinketho eziningi lapha. Engeza izithonjana ezengeziwe (zonke ezikhona zengezwa emgqeni wombhalo). Khetha isethi yezithonjana eziveza ngokucacile. Yenza kube nokwenzeka ukucacisa isitayela somugqa wokuxhuma. Engeza isithombe sangemuva.

UCABANGANI?
 
Sengivele nginemibono eminingana yokuqaliswa ezindabeni, ungangeza neyakho kumazwana.

Isixazululo sami siyasebenza ezinhlobonhlobo zezinkinga, futhi mhlawumbe uzothola ithuluzi elifaneleka kakhulu lokudweba imidwebo ngokumane uyibhale ngekhodi - njengoba bethi 'ngibonise umdwebo wakho njengekhodi'

  1. Ukukhetha okuhle
  2. Inkonzo enhle (Izinhlobo ezingu-9 zamashadi omhleli aku-inthanethi)
  3. Yebo, i-mermaid.js
  4. Futhi uma uthanda imidwebo enemininingwane eminingi futhi eyinkimbinkimbi, khona-ke uzoyithanda le phrojekthi: hamba.drawthe.net

Source: www.habr.com

Engeza amazwana