ProHoster > blog > Utawala > Mchoro wa mtandao kama msimbo / mchoro wa mtandao kama msimbo

Mchoro wa mtandao kama msimbo / mchoro wa mtandao kama msimbo

Katika miaka michache iliyopita nimejihusisha zaidi na hati. Kuandika maandishi ya maelezo kuhusu jinsi mfumo fulani unavyofanya kazi kwa ujumla ni rahisi sana. Kuchora mchoro ambao utaonyesha vitu vyote muhimu na viunganisho kati ya vitu hivi pia ni rahisi sana.

Lakini kipengele cha shida zaidi ni kusasisha hati hizi. Na maandishi yangekuwa sawa, lakini michoro… nyaraka zote ziko mtandaoni, i.e. katika umbizo la html, basi maandishi yanaambatana na picha za gif/jpeg/png, ambazo zinaonyesha michoro. Na michoro huchorwa katika programu mbalimbali kama vile Visio au huduma za mtandaoni la draw.io. Kisha unasafirisha mchoro kwa umbizo la picha na kuambatisha kwa html. Ni rahisi.

Tatizo ni nini?

Miradi kawaida ni rahisi. Kwa usahihi, sio ngumu sana. Ndio, idadi ya vitu ni dazeni au mbili, idadi ya viunganisho ni takriban sawa. Saini za pamoja, majina kadhaa. Miradi rahisi inaweza kuelezewa kwa maneno, lakini ngumu sana, ahem ... (c) "hawataelewa, bwana." Kuna mipango mingi, mabadiliko yanahitajika kufanywa kwao mara kwa mara, mara kwa mara, i.e. mara kwa mara, kwa sababu wanafuata maendeleo ya bidhaa zetu.

Unaweza kupachika html ya huduma. Je, umejaribu?

Ndiyo, hakika. Kwa mfano, napenda picha kutoka kwa gliffy.com. Lakini kufanya mabadiliko, unahitaji kwenda kwa huduma ya mtu wa tatu na kuhariri huko. Na ni ngumu zaidi kukabidhi masahihisho kwa mwenzako.

Nini cha kufanya?

Hivi majuzi nilipata hazina kwenye Github kwenye mapendekezo github.com/RaoulMeyer/diagram-as-code. Mchoro kama nambari. Wale. tunaelezea mzunguko tunaohitaji katika js. Tunaandika js hii moja kwa moja kwenye html sawa ambapo maandishi mengine ya hati yapo.

Kwa njia, ninaandika nyaraka sio kabisa katika html. Kwa kawaida, nyaraka ni seti ya faili zilizo na maandishi ya alama, ambayo hubadilishwa kuwa tovuti kamili ya nyaraka na injini fulani, kwa mfano wintersmith. Au mfumo wa wiki.

Inageuka kuwa rahisi sana: tumeandika maandishi, kisha lebo ya maandishi inafungua na nambari ya JS ya mpango huo imeelezewa ndani yake.

Kuna nini tena?

Nilipenda hazina hii, lakini hii sio mfano pekee ambapo mchoro hutolewa kwa kutumia nambari au uwakilishi wa maandishi. (Mwishoni mwa kifungu kutakuwa na viungo vya miradi na vifungu ambavyo niliweka Google kwenye mchoro wa mada kama nambari.)

Na sio mimi pekee ninayehariri hati. Wakati mwingine wenzake pia huchangia - kurekebisha neno, kubadilisha maelezo, kuingiza picha mpya. 

Kwa hivyo, ningependa kuona mchoro katika muundo wa maandishi unaosomeka, unaoeleweka ambao hautahitaji mkondo mrefu wa kujifunza. Na katika sehemu zingine unaweza kunakili-kubandika ili kuharakisha kuongeza mzunguko mpya. 

Na mwenzake mwingine alibainisha kuwa kanuni ni, bila shaka, nzuri, lakini ikiwa unatumia muundo, kila kitu kinaweza kuwa kali sana na kinachoelezea.

Kwa hivyo, nilijaribu kufikiria mchoro kama seti ya safu kadhaa ndogo zinazoelezea nodi, viunganisho, vikundi vya nodi, pamoja na eneo la nodi. Ilibadilika, kwa maoni yangu ya unyenyekevu, inafaa kabisa, ingawa, kwa kweli, ladha na rangi ...

Je, hii ni chati gani katika safu?

  • Kila nodi inaelezewa na kitambulisho ambacho hutambulisha nodi kipekee.
  • Unaweza pia kuongeza ikoni kwenye nodi na kuongeza uandishi.
  • Unaweza kutaja uhusiano kati ya nodi mbili.
  • Kwa mawasiliano kwenye mchoro, unaweza kuweka rangi na uandishi.
  • Mwelekeo wa mawasiliano hufafanuliwa kama kutoka chanzo hadi lengo. Na chanzo na lengo huonyeshwa na vitambulisho vya nodi.
  • Nodi moja au zaidi zinaweza kuongezwa kwa kikundi.
  • Uhusiano pia unaweza kubainishwa kutoka kwa kikundi na kwa kikundi.

Kutumia sheria hizi rahisi, tunapata mchoro unaofuata. Tu? Kabisa.

Mchoro wa mtandao kama msimbo / mchoro wa mtandao kama msimbo

Na inaelezewa na nambari ifuatayo ya js. Jambo kuu hapa ni kipengele cha vipengele. Ambayo nodes zinaonyeshwa - nodes, kando - viunganisho.
 

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

Bila shaka, sikuja na kuchora kwa mzunguko mwenyewe, lakini nilitumia maktaba cytoscape.js ni zana yenye nguvu sana ya taswira. Ninatumia sehemu ndogo tu ya uwezekano katika suluhisho langu. 

Sawa, huu ni mfano rahisi. Je, inaweza kuwa ngumu zaidi?

Ndio tafadhali. Ili kuonyesha nafasi, tunatumia nafasi, kuonyesha vikundi, tunaonyesha orodha ya vikundi katika vikundi, na vitu vyenyewe vina sifa ya kikundi.

Mchoro wa mtandao kama msimbo / mchoro wa mtandao kama msimbo

Na hii ndio kanuni:

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

Kwa upande mmoja, mpango kama huo ni karibu skrini kadhaa za nambari kwenye kompyuta ndogo, kwa upande mwingine, muundo wa la json hukuruhusu kujaza data yote kwa mlinganisho, haraka na unaweza kunakili-kubandika.

Kwa nini nafasi zimewekwa kando na nodi?

Ni vizuri zaidi. Kwanza tunataja nodes. Kisha tunaweza kutaja vikundi kadhaa na kuzionyesha katika nodi. Kisha tunateua viunganisho. Na kisha tu, wakati vitu kuu na viunganisho kati yao vipo, tunachukua eneo la vitu hivi kwenye mchoro. Au kinyume chake.

Je, inawezekana bila vyeo?

Inawezekana bila nafasi. Lakini itakuwa imekunjwa kidogo; unaweza kuona chaguo hili katika mifano. Hii ni kutokana na ukweli kwamba kuna algorithm kwa eneo la nodes kwa cytoscape fcose, ambayo pia inazingatia uwepo wa vikundi. Kubainisha nafasi hufanya mchoro uweze kudhibitiwa zaidi, lakini katika hatua ya rasimu ya kwanza ya mchoro inawezekana bila nafasi.

Vyeo pia vinaweza kubainishwa katika mtindo wa Meli ya Vita. Wale. nodi moja iko katika a1, na nyingine katika d5. Inasaidia hasa kwamba cytoscape hufanya vitu vilivyo kwenye turuba vinavyoweza kusonga, i.e. tunaweza kuwazunguka, angalia chaguo tofauti za mpangilio, na kisha kurekebisha mpangilio wa vipengele tunavyopenda katika msimbo.

Kwa ujumla, inaeleweka. Unaweza pia kujaribu?
 
Kwa kweli, ili kuunda mizunguko haraka, nilijifanya kuwa mdogo mhariri, ambayo yenyewe inasasisha schema na kuhifadhi toleo la hivi karibuni kwenye kivinjari (katika Uhifadhi wa ndani).

Je, umejaribu? Sasa unaweza kuiongeza kwenye ukurasa wako.

Kisha tena:

1. Kuunganisha hati

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

2. Ongeza msimbo kwa 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. tunahariri msimbo kwenye mchoro tunaohitaji (nadhani ni rahisi zaidi kuliko kuchora bundi :)

Maelezo zaidi katika ukurasa wa mradi kwenye github.

matokeo?

Nilifikia malengo yangu - kuongeza michoro za ndani kwenye nyaraka, muundo ni rahisi sana na unaeleweka. Haifai kwa nyaya za juu, lakini kwa nyaya ndogo zinazoelezea muundo wa viunganisho, ni sawa kabisa. Unaweza kurekebisha na kubadilisha kitu kwa haraka kila wakati. Ndio, na wenzake wanaweza kusahihisha kitu kwenye kizimbani wenyewe, angalau maelezo mafupi ya vitu, bila mafunzo maalum))

Ni nini kinachoweza kuboreshwa?

Kuna, bila shaka, chaguzi nyingi hapa. Ongeza ikoni za ziada (zote zilizopo zinaongezwa ndani ya hati). Chagua seti inayoeleweka zaidi ya ikoni. Fanya iwezekanavyo kutaja mtindo wa mstari wa uunganisho. Ongeza picha ya usuli.

Nini unadhani; unafikiria nini?
 
Tayari nina mawazo kadhaa ya utekelezaji katika masuala, unaweza pia kuongeza yako katika maoni.

Suluhisho langu hakika linatumika katika safu nyembamba ya shida, na labda utapata zana rahisi zaidi ya kuchora michoro kwa kuziweka tu - kama wanasema 'nionyeshe mchoro wako kama nambari'

  1. Uchaguzi mzuri
  2. Huduma kubwa (Aina 9 za mhariri wa chati mtandaoni)
  3. Bila shaka, mermaid.js
  4. Na ikiwa unapenda michoro za kina na ngumu, basi hakika utafurahiya mradi huu: go.drawthe.net

Chanzo: mapenzi.com

Kuongeza maoni