Anns na beagan bhliadhnaichean a dh ’fhalbh tha mi air a dhol an sàs nas motha ann an sgrìobhainnean. Tha sgrìobhadh teacsa mìneachaidh mu mar a tha an siostam seo no an siostam sin ag obair gu math sìmplidh sa chumantas. Tha e gu math furasta cuideachd a bhith a’ tarraing diagram a sheallas na prìomh nithean gu lèir agus na ceanglaichean eadar na nithean sin.
Ach is e an rud as duilghe a bhith a’ cumail na sgrìobhainnean seo ùraichte. Agus bhiodh an teacsa gu math, ach na diagraman... Air sgàth... tha a h-uile sgrìobhainn air-loidhne, i.e. ann an cruth html, an uairsin bidh dealbhan gif/jpeg/png an cois an teacsa, a sheallas na diagraman. Agus tha diagraman air an tarraing ann an grunn phrògraman leithid Visio no seirbheisean air-loidhne a la draw.io. An uairsin às-mhalairt an diagram gu cruth grafaigeach agus ceangail e ri html. Tha e sìmplidh.
Dè an duilgheadas a th 'ann?
Mar as trice tha na sgeamaichean sìmplidh. Nas mionaidiche, chan eil e gu math iom-fhillte. Tha, tha an àireamh de nithean dusan no dhà, tha an àireamh de cheanglaichean timcheall air an aon rud. A bharrachd air ainmean-sgrìobhte, cuid de shònrachaidhean. Faodar sgeamaichean sìmplidh a mhìneachadh ann am faclan, ach feadhainn ro iom-fhillte, ahem... (c) “cha tuig iad, a dhuine uasail.” Tha mòran sgeamaichean ann, feumar atharrachaidhean a dhèanamh orra bho àm gu àm, bho àm gu àm, i.e. daonnan, oir bidh iad a’ leantainn leasachadh ar bathar.
Faodaidh tu html na seirbheis a chuir a-steach. An do dh'fheuch thu e?
Seadh, cinnteach. Mar eisimpleir, is toil leam na grafaigean bho gliffy.com. Ach airson atharrachaidhean a dhèanamh, feumaidh tu a dhol gu seirbheis treas-phàrtaidh agus deasachadh an sin. Agus tha e nas duilghe ceartachaidhean a thiomnadh do cho-obraiche.
Dè bu chòir dhomh a dhèanamh?
O chionn ghoirid thàinig mi tarsainn air stòr air Github anns na molaidhean . Diagram mar chòd. An fheadhainn sin. tha sinn a’ toirt cunntas air a’ chuairt a tha a dhìth oirnn ann an js. Bidh sinn a’ sgrìobhadh seo js gu dìreach san aon html far a bheil an teacsa sgrìobhainnean eile.
Co-dhiù, bidh mi a’ sgrìobhadh sgrìobhainnean nach eil gu tur ann an html. Mar as trice, is e seata de fhaidhlichean a th’ ann an sgrìobhainnean le teacsa comharrachaidh, a thèid an uairsin atharrachadh gu làrach sgrìobhainnean làn-chuimseach le einnsean air choreigin, mar eisimpleir geàrd geamhraidh. No siostam wiki.
Tha e a ’tionndadh a-mach gu math goireasach: tha sinn air an teacsa a sgrìobhadh, an uairsin bidh an taga sgriobt a’ fosgladh agus tha còd JS an sgeama air a mhìneachadh ann.
Dè tha ceàrr a-rithist?
Bu toil leam an stòr seo, ach chan e seo an aon eisimpleir far a bheil diagram air a tharraing a’ cleachdadh còd no riochdachadh teacsa. (Aig deireadh an artaigil bidh ceanglaichean gu pròiseactan agus artaigilean a rinn mi Google air an diagram cuspair mar chòd.)
Agus chan e mise an aon fhear a bhios a’ deasachadh nan sgrìobhainnean. Uaireannan bidh co-obraichean cuideachd a 'cur ris - ceartaich facal, atharraich tuairisgeul, cuir a-steach dealbhan ùra.
Mar sin, bu mhath leam an diagram fhaicinn ann an cruth teacsa a tha furasta a leughadh, a thuigsinn nach fheumadh lùb ionnsachaidh fada. Agus ann an cuid de dh'àiteachan faodaidh tu eadhon dìreach lethbhreac a dhèanamh de paste gus astar ùr a chuir ris.
Agus thug co-obraiche eile fa-near gu bheil an còd, gu dearbh, math, ach ma chleachdas tu structar, faodaidh a h-uile dad a bhith gu math teann agus brìoghmhor.
Mar sin, dh'fheuch mi ri smaoineachadh air an diagram mar sheata de ghrunn shreathan beaga a tha a 'toirt cunntas air nodan, ceanglaichean, buidhnean nodan, a bharrachd air suidheachadh nodan. Thionndaidh e a-mach, nam bheachd-sa iriosal, gu math goireasach, ged, gu dearbh, am blas agus an dath ...
Ciamar a tha seo na chlàr ann an sreath?
- Tha gach nód air a mhìneachadh le aithnichear a tha ag aithneachadh an nód gu sònraichte.
- Faodaidh tu cuideachd ìomhaigh a chuir ris an nód agus sgrìobhadh a chuir ris.
- Faodaidh tu dàimh a shònrachadh eadar dà nodan.
- Airson conaltradh air an diagram, faodaidh tu an dath agus an sgrìobhadh a shuidheachadh.
- Tha stiùireadh conaltraidh air a mhìneachadh mar bho thùs gu targaid. Agus tha an stòr agus an targaid air an comharrachadh le aithnichearan nód.
- Faodar aon nod no barrachd a chur ri buidheann.
- Faodar an dàimh a shònrachadh cuideachd bhon bhuidheann agus don bhuidheann.
A’ cleachdadh nan riaghailtean sìmplidh sin, gheibh sinn an diagram a leanas. Dìreach? Gu math.
Agus tha e air a mhìneachadh leis a 'chòd js a leanas. Is e am prìomh rud an seo an nì eileamaidean. Anns a bheil nodan air an comharrachadh - nodan, oirean - ceanglaichean.
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);
Gu dearbh, cha tàinig mi suas le dealbh a’ chuairt mi-fhìn, ach chleachd mi an leabharlann na inneal lèirsinn fìor chumhachdach. Cha bhith mi a’ cleachdadh ach bloigh de na cothroman anns an fhuasgladh agam.
Ceart gu leòr, seo eisimpleir shìmplidh. Am faod e a bhith nas iom-fhillte?
Seadh mas e do thoil e. Gus dreuchdan a chomharrachadh, bidh sinn a’ cleachdadh dreuchdan, gus buidhnean a chomharrachadh, bidh sinn a’ comharrachadh liosta de bhuidhnean ann am buidhnean, agus tha buadhan buidhne aig na h-eileamaidean fhèin.
Agus seo an còd:
<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>
Air an aon làimh, tha an leithid de sgeama cha mhòr dà sgrion de chòd air laptop, air an làimh eile, tha an structar a la json a 'toirt cothrom dhut an dàta gu lèir a lìonadh le samhlachas, gu luath agus faodaidh tu lethbhreac a dhèanamh.
Carson a tha dreuchdan air an cur air leth bho nodan?
Tha e nas comhfhurtail. An toiseach bidh sinn a 'sònrachadh na h-uinneagan. An uairsin is urrainn dhuinn buidheann no dhà a shònrachadh agus an comharrachadh ann an nodan. An uairsin bidh sinn a 'sònrachadh nan ceanglaichean. Agus dìreach an uairsin, nuair a tha na prìomh nithean agus na ceanglaichean eatorra ann, bidh sinn a 'gabhail a-steach suidheachadh nan nithean sin air an diagram. No a chaochladh.
A bheil e comasach às aonais dreuchdan?
Tha e comasach às aonais dreuchdan. Ach bidh e beagan crùbach; chì thu an roghainn seo anns na h-eisimpleirean. Tha seo air sgàth gu bheil algairim ann airson suidheachadh nodan airson cytoscape , a tha cuideachd a 'toirt aire do làthaireachd bhuidhnean. Le bhith a’ sònrachadh shuidheachaidhean bidh e nas fhasa smachd a chumail air an diagram, ach aig ìre a’ chiad dreach den diagram tha e comasach às aonais shuidheachaidhean.
Faodar dreuchdan a shònrachadh cuideachd ann an stoidhle Battleship. An fheadhainn sin. tha aon nód ann an a1, agus am fear eile ann an d5. Tha e gu sònraichte na chuideachadh gu bheil cytoscape a’ toirt air na nithean air a’ chanabhas gluasad, i.e. is urrainn dhuinn an gluasad timcheall, diofar roghainnean cruth fhaicinn, agus an uairsin rèiteachadh nan eileamaidean as toil leinn sa chòd a chàradh.
San fharsaingeachd, tha e do-thuigsinn. Faodaidh tu cuideachd feuchainn?
Gu dearbh, airson cuairtean a chruthachadh gu sgiobalta, rinn mi mi fhìn beag , a bhios ann fhèin ag ùrachadh an sgeama agus a’ stòradh an dreach as ùire sa bhrobhsair (ann an localStorage).
An do dh'fheuch thu e? Faodaidh tu a-nis a chur ris an duilleag agad.
An uairsin a-rithist:
1. A 'ceangal an sgriobt
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Cuir an còd gu 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. deasaichidh sinn an còd ris an diagram a tha a dhìth oirnn (tha mi a’ smaoineachadh gu bheil e nas fhasa na comhachag a tharraing :)
Tuilleadh mion-fhiosrachaidh aig air github.
Dè anns a 'cheann thall?
Choilean mi na h-amasan agam - gus diagraman in-loidhne a chur ris na sgrìobhainnean, tha an cruth gu math sìmplidh agus furasta a thuigsinn. Chan eil e freagarrach airson sàr chuairtean, ach airson cuairtean beaga a mhìnicheas structar nan ceanglaichean, tha e gu math ceart. Faodaidh tu an-còmhnaidh tweak gu sgiobalta agus rudeigin atharrachadh thar ùine. Faodaidh, agus faodaidh co-obraichean rudeigin a cheartachadh san doca iad fhèin, co-dhiù fo-thiotalan airson stuthan, gun trèanadh sònraichte))
Dè as urrainn a leasachadh?
Tha, gu dearbh, tòrr roghainnean an seo. Cuir ìomhaighean a bharrachd ris (tha na h-uile a th’ ann mar-thà air an cur a-steach don sgriobt). Tagh seata de dh’ ìomhaighean nas inntinniche. Dèan e comasach stoidhle an loidhne ceangail a shònrachadh. Cuir dealbh cùl ris.
Dè tha thu a’ smaoineachadh?
Tha grunn bheachdan agam mu thràth airson an cur an gnìomh ann an cùisean, faodaidh tu cuideachd do bheachdan a chuir ris anns na beachdan.
Tha am fuasgladh agam gu cinnteach iomchaidh ann an raon cumhang de dhuilgheadasan, agus is dòcha gum faigh thu inneal nas freagarraiche airson diagraman a tharraing le bhith dìreach gan còdadh - mar a chanas iad ‘seall dhomh do dhiagram mar chòd’
- (9 seòrsa de chlàran neach-deasachaidh air-loidhne)
- Agus mas toil leat diagraman fìor mhionaideach agus iom-fhillte, bidh meas agad air a’ phròiseact seo gu cinnteach:
Source: www.habr.com