🥇Diagram jaringan minangka kode / Diagram jaringan minangka kode

Ing sawetara taun pungkasan aku wis dadi luwih melu ing dokumentasi. Nulis teks panjelasan babagan cara kerja sistem tartamtu umume cukup gampang. Nggambar diagram sing bakal nampilake kabeh obyek utama lan sambungan antarane obyek kasebut uga cukup gampang.

Nanging aspek sing paling masalah yaiku njaga dokumentasi iki nganti saiki. Lan teks bakal apik, nanging diagram ... Amarga ... kabeh dokumentasi online, i.e. ing format html, banjur teks kasebut diiringi gambar gif / jpeg / png, sing bener nuduhake diagram. Lan diagram digambar ing macem-macem program kayata Visio utawa layanan online a la draw.io. Banjur sampeyan ngekspor diagram menyang format grafis lan masang menyang html. Iku prasaja.

Ana apa masalahe?

Skema kasebut biasane prasaja. Luwih tepate, ora rumit banget. Ya, jumlah obyek ana rolas utawa loro, jumlah sambungan kira-kira padha. Plus teken, sawetara sebutan. Skema sing prasaja bisa digambarake nganggo tembung, nanging sing rumit banget, ehem ... (c) "ora ngerti, Pak." Ana akeh skema, owah-owahan kudu ditindakake kanthi periodik, episodik, i.e. terus-terusan, amarga padha ngetutake pangembangan produk kita.

Sampeyan bisa masang html layanan kasebut. Apa sampeyan wis nyoba?

Iya tenanan. Contone, aku seneng grafis saka gliffy.com. Nanging kanggo nggawe owahan, sampeyan kudu pindhah menyang layanan pihak katelu lan ngowahi ing kono. Lan luwih angel utusan koreksi menyang kolega.

Apa aku kudu?

Bubar aku nemokake repositori ing Github ing rekomendasi kasebut github.com/RaoulMeyer/diagram-as-code. Diagram minangka kode. Sing. kita njlèntrèhaké sirkuit kita kudu ing js. Kita nulis js iki langsung ing html sing padha karo teks dokumentasi liyane.

Miturut cara, aku nulis dokumentasi ora kabeh ing html. Biasane, dokumentasi minangka kumpulan file kanthi teks markdown, sing banjur diowahi dadi situs dokumentasi lengkap dening sawetara mesin, umpamane wintersmith. Utawa sistem wiki.

Pranyata trep banget: kita wis nulis teks, banjur tag script mbukak lan kode JS saka skema diterangake ing.

Apa maneh?

Aku seneng repositori iki, nanging iki ora mung conto ing ngendi diagram digambar nggunakake kode utawa perwakilan teks. (Ing pungkasan artikel bakal ana pranala menyang proyek lan artikel sing aku Googled ing diagram topik minangka kode.)

Lan aku ora mung siji nyunting dokumentasi. Kadhangkala kolega uga nyumbang - mbenerake tembung, ngganti deskripsi, nglebokake gambar anyar.

Mulane, aku pengin ndeleng diagram ing format teks sing bisa diwaca lan bisa dingerteni sing ora mbutuhake kurva sinau sing dawa. Lan ing sawetara panggonan sampeyan bisa malah mung nyalin-tempel kanggo nyepetake nambah sirkuit anyar.

Lan kolega liyane nyathet kode kasebut, mesthi, apik, nanging yen sampeyan nggunakake struktur, kabeh bisa dadi ketat lan ekspresif.

Mulane, aku nyoba mbayangno diagram minangka sakumpulan sawetara susunan cilik sing njlèntrèhaké simpul, sambungan, klompok simpul, uga lokasi simpul. Ternyata, miturut pendapatku, cukup trep, sanajan, mesthi, rasa lan warna ...

Kepiye grafik iki ing array?

Saben simpul diterangake dening pengenal sing unik ngenali simpul kasebut.
Sampeyan uga bisa nambah lambang menyang simpul lan nambah prasasti.
Sampeyan bisa nemtokake hubungan antarane rong simpul.
Kanggo komunikasi ing diagram, sampeyan bisa nyetel werna lan prasasti.
Arah komunikasi ditetepake saka sumber menyang target. Lan sumber lan target dituduhake dening pengenal simpul.
Siji utawa luwih simpul bisa ditambahake menyang grup.
Hubungan kasebut uga bisa ditemtokake saka grup lan menyang grup.

Nggunakake aturan prasaja iki, kita entuk diagram ing ngisor iki. Mung? Cukup.

Lan diterangake dening kode js ing ngisor iki. Sing utama ing kene yaiku obyek unsur. Ing ngendi simpul dituduhake - simpul, pinggiran - 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);

Mesthi, aku ora teka munggah karo drawing saka sirkuit dhewe, nanging digunakake perpustakaan cytoscape.js minangka alat visualisasi sing kuat banget. Aku mung nggunakake bagian sekedhik saka kemungkinan ing solusi sandi.

Oke, iki conto prasaja. Apa bisa luwih rumit?

Iyo, monggo. Kanggo nunjukake posisi, kita nggunakake posisi, kanggo nunjukake klompok, kita nuduhake dhaptar klompok ing klompok, lan unsur kasebut duwe atribut klompok.

Lan iki kode:

<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>

Ing tangan siji, skema kuwi meh saperangan saka layar kode ing laptop, ing tangan liyane, struktur a la json ngijini sampeyan kanggo isi metu kabeh data kanthi analogi, cepet lan sampeyan bisa nyalin-tempel.

Napa posisi diselehake kanthi kapisah saka simpul?

Iku luwih nyaman. Pisanan kita nemtokake node. Banjur kita bisa nemtokake sawetara klompok lan nuduhake ing simpul. Banjur kita nemtokake sambungan. Lan mung banjur, nalika obyek utama lan sambungan antarane wong-wong mau, kita njupuk ing lokasi obyek kasebut ing diagram. Utawa kosok baline.

Apa bisa tanpa posisi?

Bisa tanpa posisi. Nanging bakal rada crumpled; sampeyan bisa ndeleng pilihan iki ing conto. Iki amarga kasunyatan sing ana algoritma kanggo lokasi simpul kanggo cytoscape fcose, kang uga njupuk menyang akun ngarsane kelompok. Nemtokake posisi ndadekake diagram luwih bisa dikontrol, nanging ing tahap rancangan pisanan diagram bisa tanpa posisi.

Posisi uga bisa ditemtokake ing gaya Battleship. Sing. siji simpul dumunung ing a1, lan liyane ing d5. Utamane mbantu cytoscape ndadekake obyek ing kanvas bisa dipindhah, yaiku. kita bisa mindhah wong-wong mau watara, ndeleng opsi tata beda, lan banjur ndandani noto unsur kita kaya ing kode.

Umumé, bisa dingerteni. Sampeyan uga bisa nyoba?

Mesthi, kanggo nggawe sirkuit cepet, aku nggawe dhewe cilik editor, sing dhewe nganyari skema lan nyimpen versi paling anyar ing browser (ing localStorage).

Apa sampeyan wis nyoba? Sampeyan saiki bisa nambah menyang kaca.

Banjur maneh:

1. Nyambung script

<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>

2. Tambah kode menyang 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. kita ngowahi kode menyang diagram sing kita butuhake (aku luwih gampang tinimbang nggambar manuk hantu :)

Rincian liyane ing kaca proyek ing github.

Apa ing pungkasan?

Aku entuk gol - kanggo nambah diagram inline menyang dokumentasi, format kasebut cukup prasaja lan bisa dingerteni. Iku ora cocok kanggo super sirkuit, nanging kanggo sirkuit cilik sing nerangake struktur sambungan, iku pancen nggoleki. Sampeyan bisa tansah cepet ngapiki lan ngganti soko liwat wektu. Ya, lan kolega bisa mbenerake soko ing dermaga dhewe, paling ora katrangan kanggo obyek, tanpa latihan khusus))

Apa sing bisa didandani?

Ana, mesthi, akeh opsi ing kene. Tambah lambang tambahan (kabeh sing wis ana ditambahake inline kanggo script). Pilih set lambang sing luwih ekspresif. Nggawe bisa nemtokake gaya garis sambungan. Tambah gambar latar mburi.

Piye menurutmu?

Aku wis duwe sawetara gagasan kanggo implementasine ing masalah, sampeyan uga bisa nambah ing komentar.

Solusiku mesthi ditrapake ing sawetara masalah sing sempit, lan bisa uga sampeyan bakal nemokake alat sing luwih trep kanggo nggambar diagram kanthi mung ngode - kaya sing diucapake 'tuduhake diagram sampeyan minangka kode'

Pilihan apik
layanan gedhe (9 jinis editor online grafik)
Mesthi, mermaid.js
Lan yen sampeyan seneng diagram sing rinci lan rumit, mula sampeyan mesthi bakal ngujo proyek iki: go.drawthe.net

Source: www.habr.com

Diagram jaringan minangka kode / Diagram jaringan minangka kode

Add a comment Отменить ответ