Ni awọn ọdun meji ti o kẹhin Mo ti ni ipa diẹ sii ninu iwe-ipamọ. Kikọ ọrọ asọye nipa bii eyi tabi eto yẹn ṣe n ṣiṣẹ ni gbogbogbo rọrun pupọ. Yiya aworan ti yoo ṣe afihan gbogbo awọn nkan bọtini ati awọn asopọ laarin awọn nkan wọnyi tun rọrun pupọ.
Ṣugbọn abala iṣoro julọ ni fifi iwe-ipamọ yii di oni. Ati pe ọrọ naa yoo dara, ṣugbọn awọn aworan atọka... Nitoripe... gbogbo awọn iwe aṣẹ wa lori ayelujara, i.e. ni ọna kika html, lẹhinna ọrọ naa wa pẹlu gif/jpeg/png awọn aworan, eyiti o ṣafihan awọn aworan gangan. Ati awọn aworan atọka ti wa ni ya ni orisirisi awọn eto bi Visio tabi online awọn iṣẹ a la draw.io. Lẹhinna o ṣe okeere aworan atọka sinu ọna kika ayaworan ki o so mọ html. O rọrun.
Kini isoro naa?
Awọn eto jẹ igbagbogbo rọrun. Ni deede diẹ sii, kii ṣe idiju pupọ. Bẹẹni, nọmba awọn nkan jẹ mejila tabi meji, nọmba awọn asopọ jẹ isunmọ kanna. Plus ibuwọlu, diẹ ninu awọn designations. Awọn igbero ti o rọrun ni a le ṣe apejuwe ninu awọn ọrọ, ṣugbọn awọn ti o nira pupọ, ahem… (c) “wọn ko ni loye, sir.” Awọn ero pupọ lo wa, awọn ayipada nilo lati ṣe si wọn lorekore, ni igba diẹ, i.e. nigbagbogbo, nitori wọn tẹle awọn idagbasoke ti awọn ọja wa.
O le fi html ti iṣẹ naa. Njẹ o ti gbiyanju rẹ?
Beeni. Fun apẹẹrẹ, Mo fẹ awọn eya lati gliffy.com. Ṣugbọn lati ṣe awọn ayipada, o nilo lati lọ si iṣẹ ẹnikẹta ki o ṣatunkọ nibẹ. Ati pe o nira diẹ sii lati fi awọn atunṣe ranṣẹ si ẹlẹgbẹ kan.
Kini o yẹ ki n ṣe?
Laipe Mo wa ibi ipamọ kan lori Github ninu awọn iṣeduro . Aworan bi koodu. Awon. a ṣe apejuwe Circuit ti a nilo ni js. A kọ js yii taara ni html kanna nibiti ọrọ iwe miiran jẹ.
Nipa ọna, Mo kọ iwe kii ṣe ni html patapata. Ni deede, iwe-ipamọ jẹ eto awọn faili pẹlu ọrọ isamisi, eyiti o yipada lẹhinna si aaye iwe-kikun nipasẹ diẹ ninu ẹrọ, fun apẹẹrẹ igba otutu. Tabi eto wiki kan.
O wa ni irọrun pupọ: a ti kọ ọrọ naa, lẹhinna aami iwe afọwọkọ ṣii ati koodu JS ti ero naa jẹ apejuwe ninu rẹ.
Kini aṣiṣe lẹẹkansi?
Mo fẹran ibi ipamọ yii, ṣugbọn eyi kii ṣe apẹẹrẹ nikan nibiti o ti ya aworan kan nipa lilo koodu tabi aṣoju ọrọ kan. (Ni ipari nkan naa awọn ọna asopọ yoo wa si awọn iṣẹ akanṣe ati awọn nkan ti Mo Googled lori aworan atọka koko bi koodu.)
Ati pe emi kii ṣe ọkan nikan ti n ṣatunkọ iwe naa. Nigba miiran awọn ẹlẹgbẹ tun ṣe alabapin - ṣe atunṣe ọrọ kan, yi apejuwe pada, fi awọn aworan titun sii.
Nitorina, Emi yoo fẹ lati wo aworan atọka ni ọna kika ọrọ ti o le ni oye ti kii yoo nilo igbiyanju ẹkọ gigun. Ati ni diẹ ninu awọn ibiti o le paapaa daakọ-lẹẹmọ lati yara ni fifi agbegbe tuntun kun.
Ati pe ẹlẹgbẹ miiran ṣe akiyesi pe koodu jẹ, dajudaju, dara, ṣugbọn ti o ba lo eto, ohun gbogbo le jẹ ti o muna ati ikosile.
Nitorinaa, Mo gbiyanju lati foju inu aworan naa bi ṣeto ti ọpọlọpọ awọn opo kekere ti o ṣe apejuwe awọn apa, awọn asopọ, awọn ẹgbẹ ti awọn apa, ati ipo ti awọn apa. O wa ni jade, ninu ero irẹlẹ mi, o rọrun pupọ, botilẹjẹpe, dajudaju, itọwo ati awọ ...
Bawo ni eyi ṣe jẹ apẹrẹ kan ni titobi kan?
- Ipin ọkọọkan jẹ apejuwe nipasẹ idamo kan ti o ṣe idanimọ oju-ipin ọtọtọ.
- O tun le ṣafikun aami si ipade ki o ṣafikun akọle kan.
- O le pato ibatan laarin awọn apa meji.
- Fun ibaraẹnisọrọ lori aworan atọka, o le ṣeto awọ ati akọle.
- Itọsọna ibaraẹnisọrọ jẹ asọye bi lati orisun si ibi-afẹde. Ati orisun ati ibi-afẹde jẹ itọkasi nipasẹ awọn idamọ ipade.
- Ọkan tabi diẹ ẹ sii apa le fi kun si ẹgbẹ kan.
- Ibasepo naa tun le ṣe pato mejeeji lati ẹgbẹ ati si ẹgbẹ.
Lilo awọn ofin ti o rọrun wọnyi, a gba aworan atọka atẹle. O kan? Oyimbo.
Ati pe o jẹ apejuwe nipasẹ koodu js atẹle. Ohun akọkọ nibi ni ohun elo eroja. Ninu eyiti awọn apa ti wa ni itọkasi - awọn apa, awọn egbegbe - awọn asopọ.
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);
Dajudaju, Emi ko wa pẹlu iyaworan ti Circuit funrararẹ, ṣugbọn lo ile-ikawe naa jẹ ohun elo iworan ti o lagbara pupọ. Mo lo ida kan ti awọn aye ti o ṣeeṣe ni ojutu mi.
O dara, eyi jẹ apẹẹrẹ ti o rọrun. Njẹ o le jẹ idiju diẹ sii?
Bẹẹni jọwọ. Lati ṣe afihan awọn ipo, a lo awọn ipo, lati ṣe afihan awọn ẹgbẹ, a ṣe afihan akojọ awọn ẹgbẹ ni awọn ẹgbẹ, ati awọn eroja ara wọn ni ẹda ẹgbẹ kan.
Ati pe eyi ni koodu naa:
<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>
Ni apa kan, iru ero yii fẹrẹ to awọn iboju meji ti koodu lori kọǹpútà alágbèéká kan, ni apa keji, eto a la json ngbanilaaye lati kun gbogbo data nipasẹ afiwe, ni iyara ati pe o le daakọ-lẹẹmọ.
Kini idi ti a fi gbe awọn ipo lọtọ lati awọn apa?
O ti wa ni diẹ itura. Ni akọkọ a pato awọn apa. Lẹhinna a le pato awọn ẹgbẹ meji kan ati tọka wọn ni awọn apa. Lẹhinna a ṣe apẹrẹ awọn asopọ. Ati pe lẹhinna, nigbati awọn nkan akọkọ ati awọn asopọ laarin wọn wa nibẹ, a gba ipo ti awọn nkan wọnyi lori aworan atọka naa. Tabi idakeji.
Ṣe o ṣee ṣe laisi awọn ipo?
O ṣee ṣe laisi awọn ipo. Ṣugbọn o yoo jẹ crumpled diẹ; o le wo aṣayan yii ninu awọn apẹẹrẹ. Eyi jẹ nitori otitọ pe algorithm kan wa fun ipo ti awọn apa fun cytoscape , eyi ti o tun ṣe akiyesi ifarahan awọn ẹgbẹ. Awọn ipo ti n ṣalaye jẹ ki aworan naa jẹ iṣakoso diẹ sii, ṣugbọn ni ipele ti iwe-akọọkọ akọkọ ti aworan atọka o ṣee ṣe laisi awọn ipo.
Awọn ipo le tun ti wa ni pato ninu awọn Battleship ara. Awon. ipade kan wa ni a1, ati ekeji ni d5. O ṣe iranlọwọ paapaa pe cytoscape jẹ ki awọn nkan ti o wa lori kanfasi gbe, i.e. a le gbe wọn ni ayika, wo awọn aṣayan akọkọ ti o yatọ, ati lẹhinna ṣatunṣe iṣeto ti awọn eroja ti a fẹ ninu koodu naa.
Ni gbogbogbo, o jẹ oye. O tun le gbiyanju?
Nitoribẹẹ, lati yara ṣẹda awọn iyika, Mo ṣe ara mi ni kekere , eyiti funrarẹ ṣe imudojuiwọn eto eto ati tọju ẹya tuntun ni ẹrọ aṣawakiri (ni agbegbeStorage).
Njẹ o ti gbiyanju rẹ? O le ni bayi ṣafikun si oju-iwe rẹ.
Lẹhinna lẹẹkansi:
1. Nsopọ iwe afọwọkọ
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Ṣafikun koodu si 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. a ṣatunkọ koodu si aworan atọka ti a nilo (Mo ro pe o rọrun ju yiya owiwi :)
Awọn alaye diẹ sii ni lori github.
Kini ila isalẹ?
Mo ṣaṣeyọri awọn ibi-afẹde mi - lati ṣafikun awọn aworan inline si iwe, ọna kika jẹ ohun rọrun ati oye. Ko dara fun awọn iyika Super, ṣugbọn fun awọn iyika kekere ti o ṣalaye ọna ti awọn asopọ, o dara gaan. O le nigbagbogbo ni kiakia tweak ki o si yi nkankan lori akoko. Bẹẹni, ati awọn ẹlẹgbẹ le ṣe atunṣe ohunkan ni ibi iduro ara wọn, o kere ju awọn akọle fun awọn nkan, laisi ikẹkọ pataki))
Kini o le ni ilọsiwaju?
Dajudaju, ọpọlọpọ awọn aṣayan wa nibi. Ṣafikun awọn aami afikun (gbogbo awọn ti o wa tẹlẹ ni a ṣafikun laini si iwe afọwọkọ naa). Yan ṣeto awọn aami diẹ sii ti ikosile. Mu ki o ṣee ṣe lati pato awọn ara ti awọn asopọ ila. Fi aworan abẹlẹ kun.
Kini o le ro?
Mo ti ni awọn imọran pupọ fun imuse ni awọn ọran, o tun le ṣafikun tirẹ ninu awọn asọye.
Ojutu mi ni pato wulo ni awọn iṣoro dín, ati boya iwọ yoo wa ohun elo irọrun diẹ sii fun iyaworan awọn aworan nipa fifi koodu si wọn nikan - bi wọn ṣe sọ 'fi aworan rẹ han mi bi koodu'
- (Awọn oriṣi 9 ti awọn olootu ori ayelujara)
- Ati pe ti o ba fẹran alaye nla ati awọn aworan atọka, lẹhinna o dajudaju iwọ yoo nifẹ si iṣẹ akanṣe yii:
orisun: www.habr.com