I nā makahiki ʻelua i hala iho nei, ua komo nui au i ka palapala. He mea maʻalahi ke kākau ʻana i kahi kikokikona wehewehe e pili ana i ka hana ʻana o kekahi ʻōnaehana. He mea maʻalahi nō hoʻi ke kahakiʻi ʻana i kahi kiʻi e hōʻike i nā mea kī āpau a me nā pilina ma waena o kēia mau mea.
Akā ʻo ka mea pilikia loa ka mālama ʻana i kēia palapala i kēia lā. A maikaʻi ke kikokikona, akā ʻo nā kiʻi ... No ka mea ... aia nā palapala a pau ma ka pūnaewele, ʻo ia hoʻi. ma ka palapala html, a laila hele pū ka kikokikona me nā kiʻi gif/jpeg/png, e hōʻike maoli ana i nā kiʻi. A huki ʻia nā kiʻi i nā papahana like ʻole e like me Visio a i ʻole nā lawelawe pūnaewele a la draw.io. A laila e hoʻokuʻu aku ʻoe i ke kiʻikuhi i ke ʻano kiʻi a hoʻopili iā ia i ka html. He maʻalahi.
He aha ka pilikia?
He maʻalahi nā papahana. ʻOi aku ka pololei, ʻaʻole paʻakikī loa. ʻAe, ʻo ka helu o nā mea he ʻumi a ʻelua paha, ʻokoʻa ka helu o nā pilina. Hoʻohui pūlima, kekahi mau inoa. Hiki ke wehewehe ʻia nā ʻōkuhi maʻalahi ma nā huaʻōlelo, akā paʻakikī loa, ahem... (c) "ʻaʻole lākou e hoʻomaopopo, e ka haku." Nui nā papahana, pono e hoʻololi iā lākou i kēlā me kēia manawa, episodicly, i.e. mau, no ka mea hahai lākou i ka hoʻomohala ʻana o kā mākou huahana.
Hiki iā ʻoe ke hoʻokomo i ka html o ka lawelawe. Ua ho'āʻo anei ʻoe?
ʻAe, maopopo. No ka laʻana, makemake au i nā kiʻi mai gliffy.com. Akā no ka hoʻololi ʻana, pono ʻoe e hele i kahi lawelawe ʻaoʻao ʻekolu a hoʻoponopono ma laila. A ʻoi aku ka paʻakikī o ka hāʻawi ʻana i nā hoʻoponopono i kahi hoa hana.
He aha kaʻu e hana ai?
I kēia mau lā ua ʻike au i kahi waihona ma Github i nā ʻōlelo aʻoaʻo . Diagram like code. ʻO kēlā mau. wehewehe mākou i ke kaapuni e pono ai mākou ma js. Kākau pololei mākou i kēia js ma ka html hoʻokahi kahi i loaʻa ai nā kikokikona palapala ʻē aʻe.
Ma ke ala, kākau wau i nā palapala ʻaʻole holoʻokoʻa i ka html. ʻO ka mea maʻamau, ʻo ka palapala he pūʻulu o nā faila me nā kikokikona markdown, a laila hoʻololi ʻia i kahi pūnaewele palapala piha e kekahi mīkini, no ka laʻana wintersmith. A i ʻole he ʻōnaehana wiki.
He mea maʻalahi loa ia: ua kākau mākou i ka kikokikona, a laila wehe ka hōʻailona hōʻailona a wehewehe ʻia ka code JS o ka hoʻolālā.
He aha hou ka hewa?
Ua makemake au i kēia waihona, akā ʻaʻole kēia wale nō ka laʻana kahi e kaha ʻia ai kahi kiʻi me ka hoʻohana ʻana i ke code a i ʻole kahi kikokikona. (Ma ka hope o ka ʻatikala e loaʻa nā loulou i nā papahana a me nā ʻatikala aʻu i Googled ma ke kiʻina kumuhana ma ke ʻano he code.)
A ʻaʻole wau wale nō ka hoʻoponopono ʻana i ka palapala. I kekahi manawa hāʻawi pū nā hoa hana - hoʻoponopono i kahi huaʻōlelo, hoʻololi i kahi wehewehe, hoʻokomo i nā kiʻi hou.
No laila, makemake au e ʻike i ke kiʻikuhi ma kahi ʻano kikokikona hiki ke heluhelu ʻia a hiki ke hoʻomaopopo ʻia ʻaʻole e koi i kahi pihi aʻo lōʻihi. A ma kekahi mau wahi, hiki iā ʻoe ke kope-paʻi wale i ka hoʻohui ʻana i kahi kaapuni hou.
A ua ʻike kekahi hoa hana ʻo ka code, ʻoiaʻiʻo, maikaʻi, akā inā ʻoe e hoʻohana i ka hoʻolālā, hiki i nā mea āpau ke koʻikoʻi a hōʻike.
No laila, ua ho'āʻo wau e noʻonoʻo i ke kiʻikuhi ma ke ʻano he pūʻulu o nā ʻāpana liʻiliʻi e wehewehe ana i nā nodes, nā pilina, nā pūʻulu o nā nodes, a me kahi o nā nodes. Ua hoʻololi ʻia, i koʻu manaʻo haʻahaʻa, maʻalahi loa, ʻoiai, ʻoiaʻiʻo, ʻo ka ʻono a me ke kala ...
Pehea kēia kiʻi i loko o kahi array?
- Hōʻike ʻia kēlā me kēia node e kahi mea ʻike e ʻike kūʻokoʻa i ka node.
- Hiki iā ʻoe ke hoʻohui i kahi ikona i ka node a hoʻohui i kahi palapala.
- Hiki iā ʻoe ke kuhikuhi i kahi pilina ma waena o nā nodes ʻelua.
- No ke kamaʻilio ʻana ma ke kiʻikuhi, hiki iā ʻoe ke hoʻonohonoho i ke kala a me ka palapala.
- Ua wehewehe ʻia ke kuhikuhi o ke kamaʻilio ʻana mai ke kumu a i ka pahuhopu. A hōʻike ʻia ke kumu a me ka pahuhopu e nā mea hōʻike node.
- Hiki ke hoʻohui ʻia hoʻokahi a ʻoi aʻe paha node i kahi hui.
- Hiki ke kuhikuhi ʻia ka pilina mai ka hui a i ka hui.
Ke hoʻohana nei i kēia mau lula maʻalahi, loaʻa iā mākou ke kiʻikuhi aʻe. wale? Pono.
A ua wehewehe ʻia e ke code js ma lalo nei. ʻO ka mea nui ma ʻaneʻi ʻo ka mea element. Ma kahi e hōʻike ʻia ai nā nodes - nā nodes, nā kihi - nā pilina.
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);
ʻOiaʻiʻo, ʻaʻole wau i hele mai me ke kaha kiʻi o ke kaapuni iaʻu iho, akā hoʻohana wau i ka waihona he mea hana ike maka ikaika loa. Hoʻohana wale au i kahi hapa o nā mea hiki i kaʻu hopena.
ʻAe, he laʻana maʻalahi kēia. Hiki paha ke paʻakikī?
ʻAe ʻoluʻolu. No ka hōʻike i nā kūlana, hoʻohana mākou i nā kūlana, e hōʻike i nā pūʻulu, hōʻike mākou i kahi papa inoa o nā hui i nā hui, a ʻo nā mea i loaʻa i kahi ʻano hui.
A eia ke 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>
Ma kekahi ʻaoʻao, ʻo ia ʻano hoʻolālā he aneane ʻelua mau pale o ke code ma kahi kamepiula, ma ka ʻaoʻao ʻē aʻe, ʻo ka hale a la json e hiki ai iā ʻoe ke hoʻopiha i nā ʻikepili āpau ma ka hoʻohālikelike, wikiwiki a hiki iā ʻoe ke kope-paʻi.
No ke aha i hoʻokaʻawale ʻia ai nā kūlana mai nā nodes?
ʻOi aku ka ʻoluʻolu. ʻO ka mua mākou e wehewehe i nā nodes. A laila hiki iā mākou ke kuhikuhi i nā hui ʻelua a hōʻike iā lākou i nā nodes. A laila koho mākou i nā pilina. A laila wale nō, aia nā mea nui a me nā pilina ma waena o lākou, lawe mākou i kahi o kēia mau mea ma ke kiʻi. A i ʻole ʻē aʻe.
Hiki paha me ke kūlana ʻole?
Hiki ke loaʻa me nā kūlana ʻole. Akā e liʻiliʻi liʻiliʻi ia; hiki iā ʻoe ke ʻike i kēia koho i nā hiʻohiʻona. ʻO kēia ma muli o ka loaʻa ʻana o kahi algorithm no kahi o nā nodes no cytoscape , e noʻonoʻo pū ana i ka hele ʻana o nā hui. ʻO ka wehewehe ʻana i nā kūlana e ʻoi aku ka maʻalahi o ke kiʻi, akā i ka pae o ka kiʻi mua o ke kiʻi hiki ke hiki me ka ʻole o nā kūlana.
Hiki ke kuhikuhi ʻia nā kūlana ma ke ʻano kaua. ʻO kēlā mau mea. Aia kekahi node ma a1, a ʻo kekahi ma d5. He mea kōkua nui ia i ka cytoscape e hoʻoneʻe i nā mea ma ka canvas, ʻo ia hoʻi. hiki iā mākou ke hoʻoneʻe iā lākou a puni, ʻike i nā koho hoʻonohonoho like ʻole, a laila hoʻoponopono i ka hoʻonohonoho ʻana o nā mea a mākou e makemake ai i ke code.
Ma keʻano laulā, hiki ke hoʻomaopopo. Hiki iā ʻoe ke hoʻāʻo?
ʻOiaʻiʻo, e hana wikiwiki i nā kaʻapuni, ua hana wau iaʻu iho i kahi liʻiliʻi , nāna e hoʻohou i ka schema a mālama i ka mana hou loa i ka polokalamu kele pūnaewele (ma ka localStorage).
Ua ho'āʻo anei ʻoe? Hiki iā ʻoe ke hoʻohui iā ia i kāu ʻaoʻao.
A laila hou:
1. Hoʻohui i ka palapala
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Hoʻohui i ke code i ka 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. hoʻoponopono mākou i ke code i ke kiʻikuhi e pono ai mākou (manaʻo wau ʻoi aku ka maʻalahi ma mua o ke kiʻi ʻana i ka pueo :)
Nā kikoʻī hou aku ma ma github.
He aha ka hopena?
Ua hoʻokō au i kaʻu mau pahuhopu - e hoʻohui i nā kiʻi inline i ka palapala, maʻalahi a maʻalahi ke ʻano. ʻAʻole kūpono ia no nā kaapuni nui, akā no nā kaapuni liʻiliʻi e wehewehe i ke ʻano o nā pilina, maikaʻi loa. Hiki iā ʻoe ke hoʻololi wikiwiki a hoʻololi i kekahi mea i ka manawa. ʻAe, a hiki i nā hoa hana ke hoʻoponopono i kekahi mea i loko o ka pahu iā lākou iho, ma ka liʻiliʻi o nā captions no nā mea, me ka ʻole o ka hoʻomaʻamaʻa kūikawā))
He aha ka mea hiki ke hoʻomaikaʻi?
Aia nō, he nui nā koho ma aneʻi. Hoʻohui i nā kiʻi ʻē aʻe (ua hoʻohui ʻia nā mea āpau i ka laina i ka palapala). E koho i kahi ʻano kiʻi ʻoniʻoni. E hiki ke koho i ke ano o ka laina pili. Hoʻohui i kahi kiʻi hope.
Pehea kou manaʻo?
Ua loaʻa iaʻu kekahi mau manaʻo no ka hoʻokō ʻana i nā pilikia, hiki iā ʻoe ke hoʻohui i kāu i nā manaʻo.
Hoʻopili maoli kaʻu hoʻonā i nā pilikia liʻiliʻi, a malia paha e ʻike ʻoe i kahi mea hana maʻalahi no ke kahakiʻi ʻana i nā kiʻi ma ka hoʻopili wale ʻana iā lākou - e like me kā lākou e ʻōlelo nei 'e hōʻike mai iaʻu i kāu kiʻi ma ke ʻano he code'
- (9 ʻano o nā palapala hoʻoponopono pūnaewele)
- A inā makemake ʻoe i nā kiʻi kikoʻī a paʻakikī, a laila e mahalo nui ʻoe i kēia papahana:
Source: www.habr.com