ProHoster > Π‘Π»ΠΎΠ³ > Maamulka > Shabakadda jaantuska sida code / jaantuska shabakadda sida koodka

Shabakadda jaantuska sida code / jaantuska shabakadda sida koodka

Labadii sano ee la soo dhaafay waxaan si aad ah ugu lug lahaa dukumentiyada. Qorista qoraal sharraxaad ah oo ku saabsan sida nidaam gaar ah u shaqeeyo guud ahaan waa wax fudud. Sawiridda jaantus muujin doona dhammaan walxaha muhiimka ah iyo isku xirka walxahan sidoo kale waa wax fudud.

Laakiin arrinta ugu dhibka badan ayaa ah in dukumentiyadan la casriyeeyo. Qoraalkuna wuu fiicnaan lahaa, laakiin jaantusyada... Sababtoo ah... dhammaan dukumeentiyadu waa online, i.e. qaabka html, ka dibna qoraalka waxaa la socda sawirada gif/jpeg/png, kuwaas oo dhab ahaantii muujinaya jaantusyada. Jaantusyadana waxaa lagu sawiray barnaamijyo kala duwan sida Visio ama adeegyada internetka a la draw.io. Kadibna waxaad u dhoofisaa jaantuska qaab graphic oo ku lifaaq html. Way fududahay.

Waa maxay dhibaatada?

Nidaamyadu badanaa waa sahlan yihiin. Si aad u saxan, ma aha mid aad u adag. Haa, tirada walxuhu waa darsin ama laba, tirada isku xidhku waa isku mid. Saxeexyada lagu daray, calaamadaynta qaarkood. Nidaamyada fudud waxaa lagu qeexi karaa erayo, laakiin kuwa aad u adag, ahem... (c) "ma fahmi doonaan, mudane." Waxaa jira qorshayaal badan, isbedel ayaa loo baahan yahay in lagu sameeyo iyaga si xilliyo ah, si isdaba joog ah, i.e. si joogto ah, sababtoo ah waxay la socdaan horumarka alaabtayada.

Waxaad ku dhejin kartaa html ee adeegga. Ma isku dayday?

Haa, hubaal. Tusaale ahaan, waxaan ka helaa garaafyada gliffy.com. Laakiin si aad isbeddel u samayso, waxaad u baahan tahay inaad aado adeeg dhinac saddexaad oo aad halkaas wax ka beddesho. Wayna aad u adagtahay in saxid loo wakiisho saaxiibkii.

Maxaa la sameeyaa?

Dhawaan waxaan la kulmay meel kayd ah oo ku taal Github talooyinka github.com/RaoulMeyer/diagram-as-code. Jaantuska sida koodka. Kuwaas. waxaan ku sifeynaa wareegga aan u baahanahay js. Waxaan si toos ah ugu qornaa js isla html halka qoraalka kale uu yaallo.

Jid ahaan, dukumeentiga ayaan ku qoraa html. Caadi ahaan, dukumeentigu waa faylal ay ku qoran yihiin qoraal calaamadeysan, ka dibna loo beddelo goobta dukumeenti buuxa ee matoorka qaarkood, tusaale ahaan Wintersmith. Ama nidaamka wiki.

Waxay soo baxday mid aad u habboon: waxaanu qornay qoraalka, ka dibna qoraalka qoraalka ayaa furmaya oo JS code ee nidaamka ayaa lagu qeexay.

Maxaa qaldan mar kale?

Waan jeclaaday kaydkan, laakiin kani maaha tusaalaha kaliya ee jaantuska lagu sawiray iyadoo la isticmaalayo kood ama matalida qoraalka. (Dhammaadka maqaalka waxaa jiri doona xiriirinta mashaariicda iyo maqaallada aan Google-ka ku sameeyay jaantuska mowduuca sidii kood.)

Oo ma ihi ka kaliya ee tafatira dukumentiyada. Mararka qaarkood asxaabtu waxay sidoo kale wax ku biiriyaan - saxaan kelmad, beddel sharaxaad, geli sawiro cusub. 

Sidaa darteed, waxaan jeclaan lahaa inaan ku arko jaantuska qaab qoraal ah oo la akhriyi karo, la fahmi karo oo aan u baahnayn qalooc waxbarasho oo dheer. Meelaha qaarkoodna waxaad xitaa si fudud u koobi kartaa dhejis si aad u dedejiso ku darista wareeg cusub. 

Iyo saaxiib kale ayaa xusay in koodka, dabcan, wanaagsan yahay, laakiin haddii aad isticmaasho qaab-dhismeedka, wax walbaa waxay noqon karaan kuwo aad u adag oo muujinaya.

Sidaa darteed, waxaan isku dayay in aan qiyaaso jaantuska sida jaantusyo dhowr ah oo yaryar oo qeexaya qanjidhada, isku xirka, kooxaha qanjidhada, iyo sidoo kale meesha qanjidhada. Waxay u soo baxday, fikradayda is-hoosaysiinta ah, si habboon, inkastoo, dabcan, dhadhanka iyo midabka ...

Sidee buu kani u yahay jaantuska diyaarsan?

  • Node kasta waxaa lagu sifeeyaa tilmaame si gaar ah u tilmaamaya noodhka.
  • Waxa kale oo aad ku dari kartaa summada sanka oo aad ku dari kartaa qoraal.
  • Waxaad qeexi kartaa xiriirka ka dhexeeya laba nood.
  • Xiriirinta jaantuska, waxaad dejin kartaa midabka iyo qoraalka.
  • Jihada isgaarsiinta waxaa lagu qeexaa in laga bilaabo isha ilaa bartilmaameedka. Iyo isha iyo bartilmaameedka waxaa tilmaamaya tilmaamayaasha noodhka.
  • Hal ama in ka badan ayaa lagu dari karaa koox.
  • Xidhiidhka waxa kale oo laga sheegi karaa kooxda iyo kooxda labadaba.

Isticmaalka sharciyadan fudud, waxaan helnaa jaantuskan soo socda. Kaliya? Dhab ahaantii.

Shabakadda jaantuska sida code / jaantuska shabakadda sida koodka

Waxaana lagu qeexay js code-kan soo socda. Waxa ugu muhiimsan halkan waa walxaha walxaha. Kuwaas oo qanjidhada lagu tilmaamay - noodhka, geesaha - isku xirka.
 

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

Dabcan, ma aanan la imaan sawirka wareegga naftayda, laakiin waxaan isticmaalay maktabadda cytoscape.js waa qalab muuqaal oo aad u awood badan. Kaliya waxaan isticmaalaa qayb yar oo ka mid ah fursadaha xalkayga. 

Hagaag, tani waa tusaale fudud. Ma noqon kartaa mid aad u adag?

Haa fadlan. Si loo tilmaamo boosaska, waxaan isticmaalnaa boosas, si aan u tilmaamno kooxaha, waxaan muujineynaa liis kooxeed kooxeed, canaasiirta laftooduna waxay leeyihiin sifo kooxeed.

Shabakadda jaantuska sida code / jaantuska shabakadda sida koodka

Oo kanu waa 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>

Dhanka kale, nidaamka noocan oo kale ah wuxuu ku dhawaad ​​​​laba shaashadood oo kood ah laptop-ka, dhanka kale, qaab-dhismeedka a la json wuxuu kuu oggolaanayaa inaad ku buuxiso dhammaan xogta adigoo isbarbar dhigaya, si dhakhso ah oo aad koobi karto.

Waa maxay sababta boosaska si gooni ah looga dhigo noodhka?

Way raaxo badan tahay. Marka hore waxaan qeexnaa noodhadhka. Markaa waxaan qeexi karnaa dhowr kooxood oo aan ku tilmaami karnaa noodhka. Kadibna waxaan u qoondeeynnaa isku xirka. Oo kaliya markaa, marka walxaha ugu muhiimsan iyo isku xirka dhexdooda ay jiraan, waxaan ku qaadaneynaa meesha walxahaas ku yaal jaantuska. Ama lid ku ah.

Suurtagal ma tahay jagooyin la'aan?

Waa suurtogal boos la'aan. Laakiin waxay noqon doontaa wax yar oo jajaban; waxaad ku arki kartaa doorashadan tusaalooyinka. Tani waxay sabab u tahay xaqiiqda ah in ay jirto algorithm ee goobta qanjidhada ee cytoscape fcose, taas oo sidoo kale tixgelinaysa joogitaanka kooxaha. Sheegista boosaska waxay ka dhigaysaa jaantuska mid la xakameyn karo, laakiin marxaladda qabyo-qoraalka koowaad ee jaantuska waa suurtogal boos la'aan.

Jagooyinka sidoo kale waxaa lagu qeexi karaa qaabka Battleship. Kuwaas. hal noode waxa uu ku yaalaa a1, ka kalena d5. Waxay si gaar ah u caawisaa in cytoscape ay ka dhigto walxaha shiraaca ku jira inay dhaqaaqi karaan, i.e. Waxaan u dhaqaaqi karnaa iyaga, aragno xulashooyin kala duwan oo qaabeynta, ka dibna hagaajin karnaa habeynta walxaha aan jecelnahay koodka.

Guud ahaan, waa la fahmi karaa. Waxaad sidoo kale isku dayi kartaa?
 
Dabcan, si aad si dhakhso ah u abuurto wareegyada, waxaan naftayda ka dhigay mid yar tifaftiraha, kaas oo laftiisa cusboonaysiiya qorshaha oo ku kaydiya nuqulkii ugu dambeeyay browserka (gudaha kaydinta maxaliga ah).

Ma isku dayday? Hadda waxaad ku dari kartaa boggaaga.

Haddana mar kale:

1. Isku xirka qoraalka

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

2. Kudar koodka 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. waxaan u tafatireynaa koodka jaantuska aan u baahanahay (waxaan u maleynayaa inay ka sahlan tahay sawirida guumaystaha :)

Faahfaahin dheeraad ah at bogga mashruuca github.

Maxaa dhacaya?

Waxaan gaadhay yoolalkaygii - inaan ku daro jaantusyada khadka tooska ah dukumeentiga, qaabku waa mid fudud oo la fahmi karo. Kuma haboona wareegyada super, laakiin wareegyada yaryar ee sharxaya qaabka isku xirka, waa mid aad u fiican. Had iyo jeer si degdeg ah ayaad wax u beddeli kartaa oo wax u beddeli kartaa wakhti ka dib. Haa.

Maxaa la hagaajin karaa?

Waxaa jira, dabcan, fursado badan halkan. Ku dar calaamado dheeraad ah (dhammaan kuwa jira waxa lagu daraa khadka hoose ee qoraalka). Dooro astaamo muujin kara Suurto gal in la qeexo qaabka khadka isku xirka. Ku dar sawir gadaal

Maxay kula tahay?
 
Waxaan horeyba u haystay fikrado dhowr ah oo ku saabsan hirgelinta arrimaha, waxaad sidoo kale ku dari kartaa kaaga faallooyinka.

Xalkaygu xaqiiqdii waa mid lagu dabaqi karo dhibaatooyin kala duwan oo cidhiidhi ah, waxaana laga yaabaa inaad hesho qalab ku habboon sawirida jaantusyada adigoo si fudud u codayn kara - sida ay yidhaahdaan 'i tus jaantuska kood ahaan'

  1. Xulasho wacan
  2. Adeeg weyn (9 nooc oo jaantus ah tifaftiraha khadka tooska ah)
  3. Dabcan, mermaid.js
  4. Oo haddii aad jeceshahay jaantusyo aad u faahfaahsan oo adag, markaa hubaal waad u bogi doontaa mashruucan: tag.sawirka.net

Source: www.habr.com

Add a comment