ProHoster > Blog > fitantanan-draharaha > Network diagram as code / Network diagram as code

Network diagram as code / Network diagram as code

Tato anatin'ny roa taona farany dia lasa nandray anjara bebe kokoa tamin'ny antontan-taratasy aho. Tsotra amin'ny ankapobeny ny fanoratana lahatsoratra manazava momba ny fomba fiasan'ny rafitra iray manokana. Mora ihany koa ny manao kisary izay hampiseho ireo zavatra fototra rehetra sy ny fifandraisan'ireo zavatra ireo.

Fa ny tena olana dia ny fitazonana ity antontan-taratasy ity ho vaovao. Ary mety tsara ny lahatsoratra, fa ny kisary ... Satria ... ny antontan-taratasy rehetra dia an-tserasera, i.e. Amin'ny endrika html, dia ampiarahina amin'ny sary gif/jpeg/png ny lahatsoratra, izay tena mampiseho ireo kisary. Ary ny kisary dia atao amin'ny programa isan-karazany toy ny Visio na serivisy an-tserasera a la draw.io. Avy eo dia manondrana ny kisary ho endrika sary ianao ary ampifandraiso amin'ny html. Tsotra izany.

Inona ny olana?

Tsotra matetika ny tetika. Ny marimarina kokoa, tsy dia sarotra. Eny, ny isan'ny zavatra dia ampolony na roa, ny isan'ny fifandraisana dia eo ho eo. Miampy sonia, anarana sasany. Ny tetika tsotra dia azo faritana amin'ny teny, fa sarotra loatra, ahem ... (c) "tsy azony, tompoko." Misy tetika maro, ny fanovana dia mila atao amin'izy ireo tsindraindray, episodika, i.e. tsy tapaka, satria manaraka ny fivoaran'ny vokatray izy ireo.

Azonao atao ny mampiditra ny html amin'ny serivisy. Efa nanandrana izany ve ianao?

Eny, azo antoka. Ohatra, tiako ny sary avy amin'ny gliffy.com. Fa raha te hanao fanovana dia mila mandeha any amin'ny serivisy antoko fahatelo ianao ary manitsy ao. Ary sarotra kokoa ny manolotra fanitsiana amin'ny mpiara-miasa.

Inona no tokony ataoko?

Vao haingana aho no nahita tahiry iray tao amin'ny Github tao amin'ny tolo-kevitra github.com/RaoulMeyer/diagram-as-code. Diagram ho code. Ireo. dia mamaritra ny faritra ilaintsika amin'ny js. Manoratra ity js ity mivantana ao amin'ny html misy ny lahatsoratra hafa.

Raha ny marina, manoratra antontan-taratasy tsy amin'ny html manontolo aho. Amin'ny ankapobeny, ny antontan-taratasy dia fitambarana rakitra misy lahatsoratra marika, izay avadika ho tranokalan'ny antontan-taratasy feno amin'ny motera sasany, ohatra ny wintersmith. Na rafitra wiki.

Tena mety tokoa izany: nanoratra ny lahatsoratra izahay, dia misokatra ny tenifototra script ary voalaza ao ny code JS an'ny drafitra.

Inona indray no tsy mety?

Tiako ity tahiry ity, saingy tsy ity ihany no ohatra iray izay anaovana sary amin'ny fampiasana kaody na fanehoana lahatsoratra. (Amin'ny faran'ny lahatsoratra dia hisy rohy mankany amin'ny tetikasa sy lahatsoratra izay nojereko tamin'ny Google momba ny kisary lohahevitra ho code.)

Ary tsy izaho irery no manitsy ny antontan-taratasy. Indraindray ny mpiara-miasa dia mandray anjara koa - manitsy teny iray, manova famaritana, mampiditra sary vaovao. 

Noho izany, tiako ny hahita ilay kisary amin'ny endrika lahatsoratra azo vakiana sy azo takarina izay tsy mitaky curve fianarana lava. Ary any amin'ny toerana sasany dia azonao atao ny mandika tsotra izao mba hanafainganana ny fampidirana faritra vaovao. 

Ary ny mpiara-miasa iray hafa dia nanamarika fa ny kaody dia mazava ho azy fa tsara, fa raha mampiasa rafitra ianao, dia mety ho hentitra sy maneho hevitra ny zava-drehetra.

Noho izany, niezaka ny haka sary an-tsaina ny kisary ho toy ny andiana maromaro maromaro izay mamaritra ny nodes, ny fifandraisana, ny vondron'ny nodes, ary ny toerana misy ny nodes. Hitako, araka ny hevitro manetry tena, tena mety, na dia mazava ho azy, ny tsirony sy ny lokony...

Ahoana ity tabilao ity amin'ny array?

  • Ny node tsirairay dia faritana amin'ny alalan'ny identifier iray izay mampiavaka ny node.
  • Azonao atao koa ny manampy kisary amin'ny node ary manampy soratra.
  • Azonao atao ny mamaritra ny fifandraisana misy eo amin'ny nodes roa.
  • Ho an'ny fifandraisana amin'ny diagram dia azonao atao ny mametraka ny loko sy ny soratra.
  • Ny lalan'ny fifandraisana dia faritana avy amin'ny loharano mankany amin'ny tanjona. Ary ny loharano sy ny tanjona dia asehon'ny famantarana node.
  • Ny node iray na maromaro dia azo ampiana amin'ny vondrona iray.
  • Ny fifandraisana koa dia azo faritana na avy amin'ny vondrona na amin'ny vondrona.

Amin'ny fampiasana ireo fitsipika tsotra ireo dia azontsika ity kisary manaraka ity. Fotsiny? Tena.

Network diagram as code / Network diagram as code

Ary nofaritan'ny code js manaraka izany. Ny zava-dehibe eto dia ny zavatra singa. Ao amin'ny nodes no aseho - nodes, sisiny - fifandraisana.
 

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

Mazava ho azy fa tsy nanao ny sarin'ny fizaran-tany ny tenako, fa nampiasa ny tranomboky cytoscape.js dia fitaovana fijerena sary tena mahery vaika. Ampahany amin'ny fahafaha-manao ihany no ampiasaiko amin'ny vahaolana. 

Okay, ohatra tsotra ity. Mety ho sarotra kokoa ve izany?

Eny azafady. Mba hanondro toerana dia mampiasa toerana isika, hanondro vondrona, manondro lisitr'ireo vondrona ao anaty vondrona, ary ny singa dia manana toetran'ny vondrona.

Network diagram as code / Network diagram as code

Ary ity ny code:

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

Amin'ny lafiny iray, ny tetika toy izany dia saika misy efijery roa amin'ny kaody amin'ny solosaina finday, amin'ny lafiny iray, ny rafitra a la json dia ahafahanao mameno ny angon-drakitra rehetra amin'ny alΓ lan'ny analogy, haingana ary azonao atao ny mandika-mametaka.

Nahoana no apetraka misaraka amin'ny nodes ny toerana?

Mahazo aina kokoa. Voalohany dia mamaritra ny nodes. Avy eo dia afaka mamaritra vondrona roa isika ary manondro azy ireo amin'ny nodes. Avy eo dia manondro ny fifandraisana isika. Ary amin'izay fotoana izay ihany, rehefa misy ny tena zavatra sy ny fifandraisana eo amin'izy ireo, dia maka ny toerana misy ireo zavatra ireo eo amin'ny diagram. Na ny mifamadika amin’izany.

azo atao ve raha tsy misy toerana?

Azo atao tsy misy toerana. Fa ho simba kely izany dia azonao jerena amin'ny ohatra. Izany dia noho ny fisian'ny algorithm amin'ny toerana misy ny nodes ho an'ny cytoscape fcose, izay mihevitra ihany koa ny fisian'ny vondrona. Ny famaritana toerana dia mahatonga ny kisary ho azo fehezina kokoa, saingy amin'ny dingana amin'ny drafitra voalohany amin'ny diagram dia azo atao tsy misy toerana.

Ny toerana dia azo faritana amin'ny fomba fiadiana ihany koa. Ireo. Ny node iray dia ao amin'ny a1, ary ny iray amin'ny d5. Izy io dia manampy indrindra fa ny cytoscape dia mahatonga ireo zavatra eo amin'ny lamba azo mihetsika, i.e. afaka mamindra azy ireo isika, mijery ny safidy fandrindrana samihafa, ary avy eo amboary ny fandaminana ireo singa tiantsika ao amin'ny code.

Amin'ny ankapobeny dia azo takarina izany. Azonao atao koa ny manandrana?
 
Mazava ho azy, mba hamoronana circuits haingana dia nanao ny tenako ho kely aho ilay tonian-dahatsoratra, izay manavao ny skema ary mitahiry ny kinova farany indrindra amin'ny navigateur (ao amin'ny localStorage).

Efa nanandrana izany ve ianao? Azonao ampidirina amin'ny pejinao izao.

Avy eo indray:

1. Mampifandray ny script

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

2. Ampio code amin'ny 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. manova ny kaody amin'ny kisary ilaintsika isika (heveriko fa mora kokoa noho ny fanaovana vorondolo izany :)

Ny antsipiriany bebe kokoa ao amin'ny pejy tetikasa amin'ny github.

Inona amin'ny farany?

Nahatratra ny tanjoko aho - ny hampiditra sary an-tsoratra amin'ny antontan-taratasy, ny endrika dia tsotra sy azo takarina. Tsy mety amin'ny super circuits, fa ho an'ny circuits kely manazava ny firafitry ny fifandraisana dia tena tsara. Afaka manova haingana sy manova zavatra ianao rehefa mandeha ny fotoana. Eny, ary ny mpiara-miasa dia afaka manitsy zavatra ao amin'ny dock ny tenany, fara fahakeliny, lohateny ho an'ny zavatra, tsy misy fiofanana manokana))

Inona no azo hatsaraina?

Mazava ho azy fa betsaka ny safidy eto. Manampia kisary fanampiny (ireo efa misy rehetra dia ampiana an-tsipika amin'ny script). Mifidiana andiana kisary maneho hevitra kokoa. Ataovy azo atao ny mamaritra ny fomba ny tsipika fifandraisana. Manampia sary ambadika.

Inona ny hevitrao?
 
Efa manana hevitra maromaro momba ny fampiharana amin'ny olana aho, azonao atao koa ny manampy ny anao amin'ny fanehoan-kevitra.

Ny vahaolana azoko dia azo ampiharina amin'ny asa tery, ary mety hahita fitaovana mety kokoa ianao amin'ny fanaovana kisary amin'ny alΓ lan'ny fanoratana azy ireo fotsiny - araka ny filazan'izy ireo hoe 'asehoy ahy ho code ny diagramao'

  1. Safidy tsara
  2. Serivisy lehibe (9 karazana tabilao an-tserasera tonian-dahatsoratra)
  3. Mazava ho azy, mermaid.js
  4. Ary raha tianao ny kisary amin'ny antsipiriany sy be pitsiny, dia tena hankafy ity tetikasa ity ianao: go.drawthe.net

Source: www.habr.com

Add a comment