Дар ду соли охир ман бештар ба ҳуҷҷатгузорӣ машғул шудам. Навиштани матни тавзеҳотӣ дар бораи чӣ гуна кор кардани системаи мушаххас умуман хеле содда аст. Тартиб додани диаграммае, ки ҳамаи объектҳои асосӣ ва робитаҳои байни ин объектҳоро нишон медиҳад, инчунин хеле осон аст.
Аммо ҷанбаи мушкилтарин ин нигоҳ доштани ин ҳуҷҷатҳо мебошад. Ва матн хуб мешуд, аммо диаграммаҳо... Зеро... ҳама ҳуҷҷатҳо онлайн аст, яъне. дар формати html, пас матн бо тасвирҳои gif/jpeg/png ҳамроҳ мешавад, ки дар асл диаграммаҳоро нишон медиҳанд. Ва диаграммаҳо дар барномаҳои гуногун ба монанди Visio ё хидматҳои онлайни a la draw.io кашида мешаванд. Пас шумо диаграммаро ба формати графикӣ содир мекунед ва онро ба html замима мекунед. Ин оддӣ аст.
Масъала чист?
Нақшаҳо одатан оддӣ мебошанд. Аниқтараш, чандон мураккаб нест. Бале, шумораи объектхо як-дуто, шумораи пайвастхо такрибан як хел аст. Илова бар ин, имзоҳо, баъзе нишонаҳо. Схемаҳои оддиро метавон бо сухан тавсиф кард, аммо хеле мураккаб, аҳем... (в) "онҳо намефаҳманд, ҷаноб." Схемаҳои зиёде мавҷуданд, ба онҳо давра ба давра, давра ба давра тағирот ворид кардан лозим аст, яъне. доимо, зеро ба тараккиёти махсулоти мо пайравй мекунанд.
Шумо метавонед html-и хидматро ҷойгир кунед. Оё шумо онро санҷидаед?
Ҳа, албатта. Масалан, ба ман графика аз glify.com маъқул аст. Аммо барои ворид кардани тағирот, шумо бояд ба хидмати тарафи сеюм равед ва дар он ҷо таҳрир кунед. Ва додани ислоҳот ба ҳамтои худ мушкилтар аст.
Чӣ бояд кард?
Ба наздикӣ ман дар тавсияҳо як репозиторий дар Github пайдо шудам . Диаграмма ҳамчун код. Онхое. мо схемаеро, ки ба мо дар js лозим аст, тасвир мекунем. Мо ин js-ро мустақиман дар ҳамон html менависем, ки матни дигари ҳуҷҷатгузорӣ дар он ҷост.
Дар омади гап, ман ҳуҷҷатҳоро на пурра дар html менависам. Одатан, ҳуҷҷатгузорӣ маҷмӯи файлҳо бо матни қайдшуда мебошад, ки баъдан аз ҷониби баъзе муҳаррикҳо, масалан, Winsmith ба сайти мукаммали ҳуҷҷатҳо табдил дода мешавад. Ё системаи вики.
Ин хеле қулай мешавад: мо матнро навиштем, баъд теги скрипт кушода мешавад ва дар он рамзи JS схема тасвир шудааст.
Боз чӣ шуд?
Ба ман ин анбор писанд омад, аммо ин ягона мисол нест, ки диаграмма бо истифода аз рамз ё тасвири матн кашида мешавад. (Дар охири мақола истинодҳо ба лоиҳаҳо ва мақолаҳое хоҳанд буд, ки ман дар диаграммаи мавзӯъ ҳамчун код дар Google ҷустуҷӯ кардам.)
Ва ман ягона касе нестам, ки ҳуҷҷатҳоро таҳрир мекунад. Баъзан ҳамкорон низ саҳм мегузоранд - калимаро ислоҳ мекунанд, тавсифро тағир медиҳанд, тасвирҳои нав ворид мекунанд.
Аз ин рӯ, ман мехоҳам диаграммаро дар формати матни хондашаванда ва фаҳмо бубинам, ки хатти омӯзиши тӯлониро талаб намекунад. Ва дар баъзе ҷойҳо шумо ҳатто метавонед танҳо нусхабардорӣ кунед, то илова кардани схемаи навро суръат бахшед.
Ва як ҳамтои дигар қайд кард, ки код, албатта, хуб аст, аммо агар шумо сохторро истифода баред, ҳама чиз метавонад хеле сахтгир ва ифодакунанда бошад.
Аз ин рӯ, ман кӯшиш кардам, ки диаграммаро ҳамчун маҷмӯи якчанд массивҳои хурд тасаввур кунам, ки гиреҳҳо, пайвастҳо, гурӯҳҳои гиреҳҳо ва инчунин ҷойгиршавии гиреҳҳоро тавсиф мекунанд. Маълум шуд, ба андешаи хоксоронаи ман, хеле қулай, ҳарчанд, албатта, мазза ва рангаш...
Ин диаграмма дар массив чӣ гуна аст?
- Ҳар як гиреҳ тавассути идентификатор тавсиф карда мешавад, ки гиреҳро ба таври беназир муайян мекунад.
- Шумо инчунин метавонед ба гиреҳ нишона илова кунед ва навиштаҷот илова кунед.
- Шумо метавонед муносибати байни ду гиреҳро муайян кунед.
- Барои муошират дар диаграмма шумо метавонед ранг ва навиштаҷотро таъин кунед.
- Самти иртибот ҳамчун аз манбаъ ба ҳадаф муайян карда мешавад. Ва манбаъ ва ҳадаф бо идентификаторҳои гиреҳ нишон дода мешаванд.
- Як ё якчанд гиреҳҳоро ба гурӯҳ илова кардан мумкин аст.
- Муносибатро ҳам аз гурӯҳ ва ҳам ба гурӯҳ муайян кардан мумкин аст.
Бо истифода аз ин қоидаҳои оддӣ, мо диаграммаи зеринро мегирем. Танҳо? Бале.
Ва он бо коди зерини js тасвир шудааст. Дар ин ҷо чизи асосӣ объекти элементҳост. Дар кадом гиреҳҳо нишон дода шудаанд - гиреҳҳо, кунҷҳо - пайвастҳо.
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);
Албатта, ман худам нақшаи схемаро наомадаам, балки аз китобхона истифода кардам воситаи хеле тавонои визуализатсия мебошад. Ман танҳо як қисми имкониятҳоро дар ҳалли худ истифода мекунам.
Хуб, ин як мисоли оддӣ аст. Оё он метавонад мураккабтар бошад?
Ҳа, лутфан. Барои нишон додани мавқеъҳо мо мавқеъҳоро истифода мебарем, барои нишон додани гурӯҳҳо рӯйхати гурӯҳҳоро дар гурӯҳҳо нишон медиҳем ва худи элементҳо атрибути гурӯҳӣ доранд.
Ва ин рамз аст:
<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 la json ба шумо имкон медиҳад, ки ҳама маълумотро бо аналогия зуд пур кунед ва шумо метавонед нусхабардорӣ кунед.
Чаро мавқеъҳо аз гиреҳҳо ҷудо карда мешаванд?
Ин бароҳаттар аст. Аввал мо гиреҳҳоро муайян мекунем. Пас мо метавонем якчанд гурӯҳро муайян кунем ва онҳоро дар гиреҳ нишон диҳем. Сипас мо пайвастҳоро таъин мекунем. Ва танҳо он вақт, вақте ки объектҳои асосӣ ва робитаҳои байни онҳо вуҷуд доранд, мо ҷойгиршавии ин объектҳоро дар диаграмма қабул мекунем. Ё баръакс.
Оё бе мавқеъ имконпазир аст?
Бе мавқеъҳо имконпазир аст. Аммо он каме печида хоҳад буд; шумо ин вариантро дар мисолҳо мебинед. Ин ба он вобаста аст, ки алгоритми ҷойгиршавии гиреҳҳо барои cytoscape вуҷуд дорад , ки он хам мавчудияти гуруххоро ба назар мегирад. Муайян кардани мавқеъҳо диаграммаро бештар идорашаванда мегардонад, аммо дар марҳилаи таҳияи лоиҳаи якуми диаграмма бе мавқеъ имконпазир аст.
Мавқеъҳоро инчунин бо услуби киштии ҷангӣ муайян кардан мумкин аст. Онхое. як гиреҳ дар a1 ва дигаре дар d5 ҷойгир аст. Ин махсусан кӯмак мекунад, ки cytoscape объектҳоро дар рони ҳаракаткунанда месозад, яъне. мо метавонем онҳоро дар гирду атроф кӯчонида, вариантҳои гуногуни тарҳбандиро бубинем ва сипас ҷойгиркунии унсурҳои ба мо маъқулро дар код ислоҳ кунем.
Умуман, ин фаҳмо аст. Шумо инчунин метавонед кӯшиш кунед?
Албатта, барои зуд сохтани схемаҳо, ман худамро хурд сохтам , ки худ схемаро нав мекунад ва версияи охиринро дар браузер нигоҳ медорад (дар localStorage).
Оё шумо онро санҷидаед? Шумо ҳоло метавонед онро ба саҳифаи худ илова кунед.
Сипас боз:
1. Пайваст кардани скрипт
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Рамзро ба 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. мо кодро ба диаграммае, ки ба мо лозим аст, таҳрир мекунем (ман фикр мекунам, ки ин аз кашидани бум осонтар аст :)
Тафсилоти бештар дар дар github.
Дар охир чӣ?
Ман ба ҳадафҳои худ расидам - илова кардани диаграммаҳои дохилӣ ба ҳуҷҷатҳо, формат хеле содда ва фаҳмо аст. Он барои схемаҳои супер мувофиқ нест, аммо барои схемаҳои хурд, ки сохтори пайвастҳоро шарҳ медиҳанд, комилан хуб аст. Шумо ҳамеша метавонед бо мурури замон чизеро зуд тағир диҳед ва тағир диҳед. Бале, ва ҳамкорон метавонанд худашон чизеро дар док ислоҳ кунанд, ҳадди аққал сарлавҳаҳо барои объектҳо, бидуни омӯзиши махсус))
Чиро беҳтар кардан мумкин аст?
Дар ин ҷо, албатта, имконоти зиёде мавҷуданд. Нишонаҳои иловагӣ илова кунед (ҳамаи нишонаҳои мавҷуда ба скрипт дар сатр илова карда мешаванд). Маҷмӯи нишонаҳо бештар ифодаёфтаро интихоб кунед. Имконият диҳед, ки услуби хати пайвастшавӣ муайян карда шавад. Тасвири замина илова кунед.
Ту чӣ фикр мекунӣ?
Ман аллакай якчанд идеяҳо барои татбиқи масъалаҳо дорам, шумо инчунин метавонед дар шарҳҳои худ фикрҳои худро илова кунед.
Ҳалли ман бешубҳа дар доираи танги мушкилот татбиқ мешавад ва шояд шумо асбоби мувофиқтареро барои кашидани диаграммаҳо тавассути рамзгузории онҳо пайдо кунед - чунон ки мегӯянд "диаграммаи худро ҳамчун код нишон диҳед"
- (9 намуди муҳаррири диаграммаҳои онлайн)
- Ва агар ба шумо диаграммаҳои хеле муфассал ва мураккаб маъқул бошад, пас шумо бешубҳа ин лоиҳаро ба ҳайрат хоҳед овард:
Манбаъ: will.com