A cikin shekaru biyun da suka gabata na ƙara shiga cikin takardu. Rubuta rubutun bayani game da yadda wani tsarin ke aiki gabaɗaya abu ne mai sauƙi. Zana zane wanda zai nuna duk mahimman abubuwa da haɗin kai tsakanin waɗannan abubuwa shima abu ne mai sauƙi.
Amma mafi matsala al'amari shine kiyaye wannan takaddun har zuwa yau. Kuma rubutun zai yi kyau, amma zane-zane ... Domin ... duk takardun suna kan layi, watau. a cikin tsarin html, sannan rubutun yana tare da gif/jpeg/png hotuna, wanda a zahiri ke nuna zane-zane. Kuma ana zana zane-zane a cikin shirye-shirye daban-daban kamar Visio ko sabis na kan layi a la draw.io. Sa'an nan kuma ku fitar da zanen zuwa tsarin hoto kuma ku haɗa shi zuwa html. Yana da sauki.
Menene matsalar?
Shirye-shiryen yawanci suna da sauƙi. More daidai, ba mai rikitarwa ba. Ee, adadin abubuwa dozin ko biyu ne, adadin haɗin kai kusan iri ɗaya ne. Ƙarin sa hannu, wasu nadi. Za a iya bayyana maƙasudai masu sauƙi a cikin kalmomi, amma masu rikitarwa, ahem... (c) "ba za su fahimta ba, yallabai." Akwai tsare-tsare da yawa, ana bukatar a yi musu canje-canje lokaci-lokaci, a lokaci-lokaci, watau. kullum, saboda suna bin ci gaban samfuranmu.
Kuna iya shigar da html na sabis ɗin. Shin kun gwada shi?
Ee, tabbas. Misali, Ina son zane-zane daga gliffy.com. Amma don yin canje-canje, kuna buƙatar zuwa sabis na ɓangare na uku kuma ku gyara can. Kuma ya fi wahala a ba da gyara ga abokin aiki.
Abin da ya yi?
Kwanan nan na ci karo da wurin ajiya akan Github a cikin shawarwarin . Zane a matsayin code. Wadancan. mun bayyana kewaye da muke bukata a js. Muna rubuta wannan js kai tsaye a cikin html ɗaya inda sauran rubutun takarda yake.
Af, Ina rubuta takardun ba gaba ɗaya a cikin html ba. Yawanci, takaddun saitin fayiloli ne tare da rubutun alamar alama, wanda sai a canza shi zuwa cikakken wurin tattara bayanai ta wasu injiniyoyi, misali mai yin sanyi. Ko tsarin wiki.
Ya zama mai dacewa sosai: mun rubuta rubutun, sannan alamar rubutun ya buɗe kuma an kwatanta lambar JS na makirci a ciki.
Me ke faruwa kuma?
Ina son wannan ma'ajiyar, amma wannan ba shine kawai misali ba inda aka zana zane ta amfani da lamba ko wakilcin rubutu. (A ƙarshen labarin za a sami hanyoyin haɗi zuwa ayyuka da labaran da na Googled akan zanen jigon a matsayin lamba.)
Kuma ba ni kaɗai ne ke gyara takaddun ba. Wani lokaci abokan aiki kuma suna ba da gudummawa - gyara kalma, canza bayanin, saka sabbin hotuna.
Don haka, ina so in ga zanen a tsarin rubutu mai iya karantawa, wanda ba zai buƙaci dogon zangon koyo ba. Kuma a wasu wurare kuna iya yin kwafi kawai don ƙara sabon da'ira.
Kuma wani abokin aiki ya lura cewa lambar tana da kyau, ba shakka, mai kyau, amma idan kun yi amfani da tsari, duk abin da zai iya zama mai tsauri da bayyanawa.
Sabili da haka, na yi ƙoƙari in yi tunanin zane a matsayin saiti na ƙananan ƙananan tsararru waɗanda ke kwatanta nodes, haɗin kai, ƙungiyoyin nodes, da kuma wurin da nodes. Ya juya waje, a cikin tawali'u ra'ayi, quite dace, ko da yake, ba shakka, dandano da launi ...
Yaya wannan ginshiƙi yake a cikin tsararru?
- Ana siffanta kowane kulli ta hanyar mai ganowa wanda ke tantance kumburi ta musamman.
- Hakanan zaka iya ƙara gunki zuwa kumburi kuma ƙara rubutu.
- Kuna iya tantance alaƙa tsakanin nodes biyu.
- Don sadarwa akan zane, zaku iya saita launi da rubutu.
- An ayyana hanyar sadarwa azaman daga tushe zuwa manufa. Kuma tushen da manufa ana nuna su ta masu gano kumburi.
- Ana iya ƙara nodes ɗaya ko fiye zuwa rukuni.
- Hakanan za'a iya ayyana dangantakar duka daga ƙungiya da ƙungiyar.
Yin amfani da waɗannan ƙa'idodi masu sauƙi, muna samun zane mai zuwa. Kawai? Tabbas.
Kuma an bayyana shi ta hanyar js code mai zuwa. Babban abu a nan shine abubuwan abubuwa. A cikin abin da aka nuna nodes - nodes, gefuna - haɗi.
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);
Tabbas, ban zo da zanen da'ira da kaina ba, amma na yi amfani da ɗakin karatu kayan aikin gani ne mai ƙarfi sosai. Ina amfani ne kawai da ɗan juzu'in yuwuwar a cikin bayani na.
To, wannan misali ne mai sauƙi. Zai iya zama mafi rikitarwa?
Ee don Allah. Don nuna matsayi, muna amfani da matsayi, don nuna ƙungiyoyi, muna nuna jerin ƙungiyoyi a rukuni, kuma abubuwan da kansu suna da sifa na rukuni.
Kuma wannan shine 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>
A gefe guda, irin wannan makirci kusan nau'i-nau'i ne na code akan kwamfutar tafi-da-gidanka, a gefe guda, tsarin a la json yana ba ku damar cika duk bayanan ta hanyar kwatance, da sauri kuma kuna iya kwafi-manna.
Me yasa aka sanya mukamai daban da nodes?
Ya fi dadi. Da farko mun saka nodes. Sa'an nan za mu iya ƙayyade kamar wata ƙungiya da nuna su a cikin nodes. Sa'an nan kuma mu sanya haɗin. Sannan kawai, lokacin da manyan abubuwa da alaƙar da ke tsakanin su, muna ɗaukar wurin da waɗannan abubuwan suke a cikin zane. Ko akasin haka.
Shin yana yiwuwa ba tare da matsayi ba?
Yana yiwuwa ba tare da matsayi ba. Amma zai zama ɗan murƙushewa; zaku iya ganin wannan zaɓi a cikin misalan. Wannan shi ne saboda gaskiyar cewa akwai algorithm don wurin da nodes don cytoscape , wanda kuma yayi la'akari da kasancewar ƙungiyoyi. Ƙayyadaddun matsayi yana sa zane ya fi dacewa, amma a mataki na farko na zane-zane yana yiwuwa ba tare da matsayi ba.
Hakanan za'a iya ƙayyade matsayi a cikin salon Battleship. Wadancan. kumburi ɗaya yana cikin a1, ɗayan kuma a cikin d5. Yana taimakawa musamman cewa cytoscape yana sa abubuwan da ke kan zane su motsa, watau. za mu iya motsa su, duba zaɓuɓɓukan shimfidawa daban-daban, sannan mu gyara tsarin abubuwan da muke so a cikin lambar.
Gabaɗaya, yana da fahimta. Hakanan zaka iya gwadawa?
Tabbas, don ƙirƙirar da'irori da sauri, na sanya kaina ƙaramin , wanda da kansa ke sabunta tsarin kuma yana adana sabon sigar a cikin mai binciken (a cikin Storage na gida).
Shin kun gwada shi? Yanzu zaku iya ƙara shi zuwa shafinku.
Sannan kuma:
1. Haɗa rubutun
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Ƙara lamba zuwa 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. muna gyara lambar zuwa zanen da muke buƙata (Ina tsammanin yana da sauƙi fiye da zana mujiya :)
Karin bayani a na github.
Mene ne a karshen?
Na cim ma burina - don ƙara zane-zane na layi a cikin takaddun, tsarin yana da sauƙi da fahimta. Bai dace da manyan da'irori ba, amma ga ƙananan da'irori waɗanda ke bayyana tsarin haɗin gwiwa, yana da kyau sosai. Kuna iya koyaushe da sauri tweak kuma canza wani abu akan lokaci. Haka ne, kuma abokan aiki na iya gyara wani abu a cikin tashar jiragen ruwa da kansu, aƙalla rubutun kalmomi don abubuwa, ba tare da horo na musamman ba))
Me za a iya inganta?
Akwai, ba shakka, zaɓuɓɓuka masu yawa a nan. Ƙara ƙarin gumaka (duk waɗanda ke wanzu ana ƙara su ta layi zuwa rubutun). Zaɓi saitin gumaka masu bayyanawa. Yi damar tantance salon layin haɗin gwiwa. Ƙara hoton bango.
Me kuke tunani?
Na riga na sami ra'ayoyi da yawa don aiwatarwa a cikin batutuwa, kuna iya ƙara naku a cikin sharhi.
Maganina tabbas yana aiki a cikin kunkuntar ayyuka na ayyuka, kuma ƙila za ku sami kayan aiki mafi dacewa don zana zane ta hanyar sanya su kawai - kamar yadda suke cewa 'nuna mani zanen ku azaman lambar'
- (nau'ikan ginshiƙai 9 editan kan layi)
- Kuma idan kuna son zane mai zurfi da rikitarwa, to tabbas zaku sha'awar wannan aikin:
source: www.habr.com