Lilemong tse 'maloa tse fetileng ke kentse letsoho haholoanyane litokomaneng. Ho ngola mongolo o hlalosang hore na sena kapa sistimi eo e sebetsa joang hangata ho bonolo. Ho etsa setšoantšo se tla bontša lintho tsohle tsa bohlokoa le likamano pakeng tsa lintho tsena le hona ho bonolo haholo.
Empa ntlha e thata ka ho fetisisa ke ho boloka litokomane tsena li le morao tjena. Mme mongolo o ne o tlaba hantle, empa ditaera ... Hobane ... litokomane tsohle li inthaneteng, ke hore. ka sebopeho sa html, ebe mongolo o tsamaisana le litšoantšo tsa gif/jpeg/png, tse hlileng li bontšang litšoantšo. 'Me litšoantšo li toroa ka mananeo a fapaneng a kang Visio kapa litšebeletso tsa inthanete a la draw.io. Ebe o romella setšoantšo ho sebopeho sa litšoantšo ebe o se hokela ho html. Ho bonolo.
Bothata ke eng?
Hangata merero e bonolo. Ka nepo, ha e thata haholo. E, palo ea lintho ke leshome le metso e 'meli kapa tse peli, palo ea likhokahano e batla e lekana. Li-signature tse ling, mabitso a mang. Merero e bonolo e ka hlalosoa ka mantsoe, empa e rarahaneng haholo, ahem... (c) “ba ke ke ba utloisisa, mohlomphehi.” Ho na le merero e mengata, liphetoho tse lokelang ho etsoa ho tsona nako le nako, ka linako tse ling, i.e. kamehla, hobane ba latela tsoelopele ea lihlahisoa tsa rona.
U ka kenya html ea ts'ebeletso. Na u se u lekile?
E, ehlile. Ka mohlala, ke rata litšoantšo tse tsoang ho gliffy.com. Empa ho etsa liphetoho, o hloka ho ea litšebeletsong tsa motho oa boraro ebe o hlophisa moo. 'Me ho thata le ho feta ho fana ka litokiso ho mosebetsi-'moho.
Ke lokela ho etsa eng?
Haufinyane tjena ke ile ka fumana sebaka sa polokelo ho Github ho likhothaletso . Setšoantšo e le khoutu. Tseo. re hlalosa potoloho eo re e hlokang ho js. Re ngola js ena ka kotloloho ho html e tšoanang moo mongolo o mong oa litokomane o leng teng.
Ka tsela, ke ngola litokomane eseng ka botlalo ka html. Ka tloaelo, litokomane ke sete sa lifaele tse nang le mongolo oa markdown, ebe o fetoloa sebaka sa litokomane tse felletseng ka enjine e itseng, mohlala, wintersmith. Kapa sistimi ea wiki.
Ho bonahala ho le bonolo haholo: re ngotse sengoloa, ebe tag ea script e bula mme khoutu ea JS ea leano e hlalositsoe ho eona.
Phoso ke efe hape?
Ke ratile polokelo ena, empa ona ha se ona feela mohlala moo setšoantšo se toroang ho sebelisoa khoutu kapa mongolo. (Qetellong ea sengoloa ho tla ba le likhokahano tsa merero le lingoliloeng tseo ke li rometseng ho Google setšoantšong sa sehlooho joalo ka khoutu.)
'Me ha se 'na feela ea hlophisang litokomane. Ka linako tse ling basebetsi-'moho le bona ba kenya letsoho - lokisa lentsoe, fetola tlhaloso, kenya litšoantšo tse ncha.
Ka hona, ke rata ho bona sets'oants'o ka mokhoa o baloang, o utloisisoang, o sa hlokeng nako e telele ea ho ithuta. 'Me libakeng tse ling u ka kopitsa le ho peista ho potlakisa ho eketsa potoloho e ncha.
'Me mosebetsi-'moho e mong o hlokometse hore khoutu e ntle, empa ha u sebelisa sebopeho, ntho e' ngoe le e 'ngoe e ka ba e thata haholo le e hlakileng.
Ka hona, ke ile ka leka ho nahana ka setšoantšo e le sete sa lihlopha tse 'maloa tse nyenyane tse hlalosang li-node, li-connections, lihlopha tsa li-node, hammoho le sebaka sa li-node. E ile ea e-ba, ka maikutlo a ka a ikokobelitseng, e loketseng haholo, le hoja, ehlile, tatso le 'mala ...
Chate ee e hlophisitsoe joang?
- Node e 'ngoe le e' ngoe e hlalosoa ke sekhetho se khethollang node ka mokhoa o ikhethileng.
- Hape o ka eketsa aekhone ho node ebe o eketsa mongolo.
- O ka hlakisa kamano pakeng tsa li-node tse peli.
- Bakeng sa puisano holim'a setšoantšo, o ka beha 'mala le mongolo.
- Tataiso ea puisano e hlalosoa ho tloha mohloling ho ea ho sepheo. 'Me mohloli le sepheo li bontšoa ke li-node identifiers.
- Node e le 'ngoe kapa ho feta e ka eketsoa sehlopheng.
- Kamano e ka boela ea hlalosoa ka bobeli ho tloha sehlopheng le ho sehlopha.
Re sebelisa melao ena e bonolo, re fumana setšoantšo se latelang. Feela? Ehlile.
'Me e hlalosoa ke khoutu e latelang ea js. Ntho e ka sehloohong mona ke ntho ea elements. Moo ho bonts'itsoeng li-node - li-nodes, li-medge - li-connections.
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);
Ehlile, ha kea ka ka tla le setšoantšo sa potoloho ka bonna, empa ke sebelisitse laeborari ke sesebelisoa se matla haholo sa pono. Ke sebelisa karoloana feela ea menyetla ea tharollo ea ka.
Ho lokile, ona ke mohlala o bonolo. Na e ka ba thata ho feta?
Ee ka kopo. Ho bontša maemo, re sebelisa maemo, ho bontša lihlopha, re bontša lethathamo la lihlopha ka lihlopha, 'me likarolo ka botsona li na le tšobotsi ea sehlopha.
Mme khoutu ke ena:
<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>
Ka lehlakoreng le leng, morero o joalo ke hoo e batlang e le li-skrini tse 'maloa tsa khoutu ho laptop, ka lehlakoreng le leng, sebopeho sa la json se u lumella ho tlatsa lintlha tsohle ka papiso, ka potlako 'me u ka kopitsa-ho beha.
Ke hobane'ng ha maemo a behiloe ka thoko ho li-node?
E phutholohile haholoanyane. Pele, re hlalosa li-node. Ebe re ka hlakisa lihlopha tse 'maloa ebe re li bontša ka li-node. Ebe re khetha likhokahano. 'Me feela ka nako eo, ha lintho tse ka sehloohong le likamano pakeng tsa tsona li le teng, re nka sebaka sa lintho tsena setšoantšong. Kapa ka tsela e fapaneng.
Na hoa khoneha ntle le maemo?
Hoa khoneha ntle le maemo. Empa e tla fokola hanyane; o ka bona khetho ena mehlaleng. Sena se bakoa ke taba ea hore ho na le algorithm bakeng sa sebaka sa li-node bakeng sa cytoscape , e boetse e nahanela boteng ba lihlopha. Ho hlalosa maemo ho etsa hore setšoantšo se laolehe haholoanyane, empa sethaleng sa moralo oa pele oa setšoantšo se ka khoneha ntle le maemo.
Maemo a ka boela a hlalosoa ka mokhoa oa Battleship. Tseo. node e le 'ngoe e fumaneha ho a1, 'me e' ngoe e ho d5. Haholo-holo e thusa hore cytoscape e etse hore lintho tse holim'a seile li tsamaee, ke hore. re ka li tsamaisa, ra bona likhetho tse fapaneng tsa sebopeho, ebe re lokisa tlhophiso ea likarolo tseo re li ratang khoutu.
Ka kakaretso, hoa utloahala. U ka boela ua leka?
Ehlile, ho theha lipotoloho kapele, ke ile ka iketsetsa e nyane , eo ka boeona e nchafatsang schema le ho boloka mofuta oa morao-rao ho sebatli (ho LocalStorage).
Na u se u lekile? Joale u ka e kenya leqepheng la hau.
Joale hape:
1. Ho hokela mongolo
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Kenya khoutu ho 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. re hlophisa khoutu ho setšoantšo seo re se hlokang (ke nahana hore ho bonolo ho feta ho taka sephooko :)
Lintlha tse ling ho ho github.
Ke'ng qetellong?
Ke fihletse lipheo tsa ka - ho kenyelletsa litšoantšo tse kahare ho litokomane, sebopeho se bonolo ebile sea utloahala. Ha e loketse lipotoloho tse kholo, empa bakeng sa lipotoloho tse nyane tse hlalosang sebopeho sa likhokahano, li ntle haholo. U ka fetola ntho e 'ngoe le e' ngoe ka nako e telele. E, 'me basebetsi-'moho le bona ba ka lokisa ntho e itseng boema-kepeng, bonyane litlhaloso tsa lintho, ntle le koetliso e khethehileng))
Ho ka ntlafatsoa eng?
Ehlile, ho na le likhetho tse ngata mona. Kenya li-icon tse ling (tsohle tse seng li ntse li le teng li kenyellelitsoe ka har'a script). Khetha sete e hlakileng haholoanyane ea litšoantšo. Etsa hore ho khonehe ho hlalosa mokhoa oa mohala oa khokahanyo. Kenya setšoantšo sa bokamorao.
U nahana eng?
Ke se ke ntse ke e-na le maikutlo a 'maloa bakeng sa ts'ebetsong litabeng, u ka boela ua eketsa ea hau ho maikutlo.
Tharollo ea ka e hlile e sebetsa mathateng a moqotetsane, 'me mohlomong u tla fumana sesebelisoa se bonolo haholoanyane sa ho taka litšoantšo ka ho li ngola feela - joalo ka ha ba re' mpontše setšoantšo sa hau joalo ka khoutu'
- (Mefuta e 9 ea lichate inthaneteng)
- 'Me haeba u rata litšoantšo tse hlakileng le tse rarahaneng, joale u tla khahloa ke morero ona:
Source: www.habr.com