Dina sababaraha taun ka pengker kuring parantos janten langkung aub dina dokuméntasi. Nulis téks explanatory ngeunaan kumaha sistem husus jalan umumna cukup basajan. Ngagambar diagram anu bakal ningalikeun sadaya objék konci sareng sambungan antara objék ieu ogé gampang.
Tapi aspék anu paling masalah nyaéta ngajaga dokuméntasi ieu dugi ka ayeuna. Jeung téks bakal rupa, tapi diagram ... Kusabab ... kabéh dokuméntasi téh online, i.e. dina format html, teras teksna dibarengan ku gambar gif/jpeg/png, nu sabenerna nembongkeun diagram. Jeung diagram digambar dina sagala rupa program kayaning Visio atawa jasa online a la draw.io. Teras anjeun ngékspor diagram kana format grafis sareng ngagantelkeun kana html. Ieu basajan.
Naon masalahna?
Skéma biasana saderhana. Leuwih tepat, teu pisan pajeulit. Leres, jumlah obyék nyaéta belasan atanapi dua, jumlah sambunganna kirang langkung sami. Ditambah tanda tangan, sababaraha sebutan. Skéma saderhana tiasa dijelaskeun ku kecap-kecap, tapi anu rumit teuing, ahem ... (c) "aranjeunna moal ngartos, Pak." Aya seueur skéma, parobihan kedah dilakukeun pikeun aranjeunna sacara périodik, sacara episodik, i.e. terus, sabab aranjeunna nuturkeun ngembangkeun produk urang.
Anjeun tiasa ngalebetkeun html jasa éta. Dupi anjeun nyobian?
Sumuhun, pasti. Contona, kuring resep grafik ti gliffy.com. Tapi pikeun nyieun parobahan, anjeun kudu indit ka layanan pihak katilu tur edit dinya. Sareng langkung hese ngawakilan koréksi ka batur sapagawean.
Naon anu kudu dipigawé?
Anyar-anyar ieu kuring mendakan gudang di Github dina rekomendasi . Diagram salaku kode. Jelema. urang ngajelaskeun sirkuit urang kudu di js. Urang nulis js ieu langsung dina html sarua dimana téks dokuméntasi séjén.
Ku jalan kitu, kuring nulis dokuméntasi teu sagemblengna dina html. Biasana, dokuméntasi mangrupikeun sakumpulan file kalayan téks markdown, anu teras dirobih janten situs dokuméntasi lengkep ku sababaraha mesin, contona Wintersmith. Atawa sistem wiki.
Tétéla pisan merenah: kami geus ditulis téks, lajeng tag skrip dibuka jeung kode JS skéma dijelaskeun dina eta.
Aya naon deui?
Kuring resep gudang ieu, tapi ieu teu hijina conto dimana diagram a digambar maké kode atawa ngagambarkeun téks. (Dina ahir tulisan bakal aya tautan kana proyék sareng tulisan anu kuring Googled dina diagram topik salaku kode.)
Sareng kuring sanés ngan ukur ngédit dokuméntasi. Kadang kolega ogé nyumbang - ngabenerkeun kecap, ngarobah pedaran, selapkeun gambar anyar.
Ku alatan éta, abdi hoyong ningali diagram dina format téks bisa dibaca tur kaharti nu teu merlukeun kurva learning panjang. Sareng di sababaraha tempat anjeun tiasa ngan saukur nyalin-témpél pikeun nyepetkeun nambihan sirkuit énggal.
Sareng batur sapagawean nyatakeun yén kode éta, tangtosna, saé, tapi upami anjeun nganggo struktur, sadayana tiasa ketat sareng ekspresif.
Ku alatan éta, kuring nyoba ngabayangkeun diagram salaku susunan sababaraha arrays leutik nu ngajelaskeun titik, sambungan, grup titik, kitu ogé lokasi titik. Tétéla, dina pamadegan hina kuring, rada merenah, sanajan, tangtosna, rasa jeung warna ...
Kumaha ieu bagan dina susunan?
- Unggal titik digambarkeun ku hiji identifier nu uniquely nangtukeun titik.
- Anjeun ogé tiasa nambihan ikon kana titik sareng nambihan prasasti.
- Anjeun tiasa nangtukeun hubungan antara dua titik.
- Pikeun komunikasi dina diagram, anjeun tiasa nyetél warna sareng prasasti.
- Arah komunikasi dihartikeun ti sumber ka sasaran. Jeung sumber jeung udagan dituduhkeun ku identifiers titik.
- Hiji atawa leuwih titik bisa ditambahkeun kana grup.
- Hubunganna ogé tiasa ditetepkeun boh ti grup sareng ka grup.
Ngagunakeun aturan basajan ieu, urang meunang diagram handap. Ngan? Lumayan.
Sarta eta digambarkeun ku kode js handap. Hal utama di dieu nyaéta obyék unsur. Dimana titik dituduhkeun - titik, edges - sambungan.
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);
Tangtu, kuring teu datang nepi ka gambar tina sirkuit sorangan, tapi dipaké perpustakaan mangrupakeun alat visualisasi anu pohara kuat. Kuring ngan ngagunakeun fraksi tina kemungkinan dina solusi kuring.
Oké, ieu conto basajan. Bisa jadi leuwih pajeulit?
Sumuhun mangga. Pikeun nunjukkeun posisi, kami nganggo posisi, pikeun nunjukkeun grup, kami nunjukkeun daptar grup dina grup, sareng elemen sorangan gaduh atribut grup.
Sareng ieu kodeu:
<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>
Di hiji sisi, skéma sapertos ieu ampir sababaraha layar kode dina laptop, di sisi anu sanésna, struktur a la json ngamungkinkeun anjeun ngeusian sadaya data ku analogi, gancang sareng anjeun tiasa nyalin-témpél.
Naha posisi disimpen misah ti titik?
Éta langkung nyaman. Kahiji urang nangtukeun titik. Teras urang tiasa netepkeun sababaraha grup sareng nunjukkeun aranjeunna dina titik. Teras we nunjuk sambungan. Sarta ngan lajeng, nalika objék utama jeung sambungan antara aranjeunna aya, urang nyandak on lokasi objék ieu dina diagram. Atawa sabalikna.
Éta mungkin tanpa posisi?
Ieu mungkin tanpa posisi. Tapi éta bakal rada kusut; anjeun tiasa ningali pilihan ieu dina conto. Ieu alatan kanyataan yén aya hiji algoritma pikeun lokasi titik pikeun cytoscape , nu ogé nyokot akun ayana grup. Nangtukeun posisi ngajadikeun diagram leuwih controllable, tapi dina tahap draf mimiti diagram mungkin tanpa posisi.
Posisi ogé bisa dieusian dina gaya Kapal perang. Jelema. hiji titik lokasina di a1, sarta séjén di d5. Ieu hususna mantuan yén cytoscape ngajadikeun objék dina kanvas moveable, i.e. urang tiasa mindahkeun éta sabudeureun, tingali pilihan perenah béda, lajeng ngalereskeun susunan elemen urang resep dina kode.
Sacara umum, éta kaharti. Anjeun ogé tiasa nyobian?
Tangtu, pikeun gancang nyieun sirkuit, Kuring nyieun sorangan leutik , nu sorangan ngamutahirkeun skéma jeung nyimpen versi panganyarna dina browser nu (dina localStorage).
Dupi anjeun nyobian? Anjeun ayeuna tiasa nambihanana kana halaman anjeun.
Lajeng deui:
1. Nyambungkeun naskah
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Tambahkeun kode kana 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. urang ngédit kodeu kana diagram anu urang butuhkeun (Jigana éta langkung gampang tibatan ngagambar bueuk :)
Langkung rinci di dina github.
Naon hasilna?
Kuring ngahontal tujuan kuring - pikeun nambihan diagram inline kana dokuméntasi, formatna cukup saderhana sareng kaharti. Teu cocog pikeun sirkuit super, tapi pikeun sirkuit leutik anu ngajelaskeun struktur sambungan, éta leres pisan. Anjeun salawasna bisa gancang tweak sarta ngarobah hal kana waktu. Leres, sareng kolega tiasa ngabenerkeun hiji hal dina darmaga sorangan, sahenteuna caption pikeun objék, tanpa latihan khusus))
Naon anu tiasa dironjatkeun?
Aya, tangtosna, seueur pilihan di dieu. Tambahkeun ikon tambahan (sadayana aya nu ditambahkeun inline kana naskah). Pilih sakumpulan ikon anu langkung ekspresif. Ngamungkinkeun pikeun nangtukeun gaya jalur sambungan. Tambahkeun gambar latar.
Naon anu anjeun pikirkeun?
Kuring geus boga sababaraha gagasan pikeun palaksanaan dina masalah, anjeun ogé tiasa nambahkeun anjeun dina komentar.
Solusi kuring pasti lumaku dina sauntuyan masalah anu sempit, sareng panginten anjeun bakal mendakan alat anu langkung merenah pikeun ngagambar diagram ku ngan saukur coding - sabab aranjeunna nyarios 'tunjukkeun diagram anjeun salaku kode'
- (9 jinis grafik éditor online)
- Sareng upami anjeun resep diagram anu detil sareng kompleks, maka anjeun pasti bakal muji proyék ieu:
sumber: www.habr.com