Son bir neçə ildə sənədlərlə daha çox məşğul olmuşam. Müəyyən bir sistemin necə işlədiyinə dair izahlı mətn yazmaq ümumiyyətlə olduqca sadədir. Bütün əsas obyektləri və bu obyektlər arasındakı əlaqələri göstərəcək bir diaqram çəkmək də olduqca asandır.
Ancaq ən problemli cəhət bu sənədlərin yenilənməsidir. Və mətn yaxşı olardı, amma diaqramlar... Çünki... bütün sənədlər onlayndır, yəni. html formatında, sonra mətn əslində diaqramları göstərən gif/jpeg/png şəkilləri ilə müşayiət olunur. Və diaqramlar Visio və ya onlayn xidmətlər a la draw.io kimi müxtəlif proqramlarda çəkilir. Sonra diaqramı qrafik formata ixrac edir və html-ə əlavə edirsiniz. Bu sadədir.
Problem nədir?
Sxemlər adətən sadədir. Daha doğrusu, çox mürəkkəb deyil. Bəli, obyektlərin sayı onlarla və ya ikidir, əlaqələrin sayı təxminən eynidir. Üstəlik imzalar, bəzi təyinatlar. Sadə sxemləri sözlə təsvir etmək olar, amma çox mürəkkəb olanları, ahem... (c) “başa düşməyəcəklər, ser.” Bir çox sxem var, onlara vaxtaşırı, epizodik olaraq dəyişikliklər etmək lazımdır, yəni. daim, çünki məhsullarımızın inkişafını izləyirlər.
Siz xidmətin html-ni yerləşdirə bilərsiniz. Siz cəhd etmisiniz?
Bəli əminəm. Məsələn, gliffy.com-dan olan qrafikləri bəyənirəm. Ancaq dəyişiklik etmək üçün üçüncü tərəf xidmətinə getmək və orada redaktə etmək lazımdır. Düzəlişləri həmkarına həvalə etmək daha çətindir.
Bəs nə etməli?
Bu yaxınlarda tövsiyələrdə Github-da bir depoya rast gəldim . Kod kimi diaqram. Bunlar. js-də bizə lazım olan sxemi təsvir edirik. Bu js-i birbaşa digər sənədləşmə mətninin olduğu html-də yazırıq.
Yeri gəlmişkən, mən sənədləri tam olaraq html-də yazmıram. Tipik olaraq, sənədləşmə qeyd mətni olan fayllar toplusudur, daha sonra hansısa mühərrik, məsələn, wintersmith tərəfindən tam hüquqlu sənədləşmə saytına çevrilir. Və ya viki sistemi.
Çox rahat çıxır: mətni yazdıq, sonra skript teqi açılır və sxemin JS kodu orada təsvir olunur.
Yenə nə oldu?
Bu deponu bəyəndim, lakin bu, kod və ya mətn təsvirindən istifadə edərək diaqramın çəkildiyi yeganə nümunə deyil. (Məqalənin sonunda mövzu diaqramında kod olaraq Google-da axtardığım layihələrə və məqalələrə keçidlər olacaq.)
Sənədləri redaktə edən tək mən deyiləm. Bəzən həmkarlar da töhfə verirlər - sözü düzəltmək, təsviri dəyişdirmək, yeni şəkillər əlavə etmək.
Buna görə də, diaqramı uzun öyrənmə əyrisi tələb etməyən oxunaqlı, başa düşülən mətn formatında görmək istərdim. Bəzi yerlərdə hətta yeni dövrə əlavə etməyi sürətləndirmək üçün sadəcə olaraq kopyalayıb yapışdıra bilərsiniz.
Və başqa bir həmkarım qeyd etdi ki, kod, əlbəttə ki, yaxşıdır, lakin strukturdan istifadə etsəniz, hər şey çox sərt və ifadəli ola bilər.
Buna görə də, diaqramı qovşaqları, əlaqələri, qovşaq qruplarını, eləcə də qovşaqların yerini təsvir edən bir neçə kiçik massivlər toplusu kimi təsəvvür etməyə çalışdım. Məlum oldu ki, mənim təvazökar fikrimcə, olduqca rahatdır, baxmayaraq ki, əlbəttə ki, dadı və rəngi...
Bu necə massivdəki diaqramdır?
- Hər bir qovşaq qovşağı unikal şəkildə müəyyən edən identifikatorla təsvir olunur.
- Siz həmçinin qovşaq üçün simvol əlavə edə və yazı əlavə edə bilərsiniz.
- Siz iki qovşaq arasında əlaqə təyin edə bilərsiniz.
- Diaqramda ünsiyyət üçün rəng və yazı təyin edə bilərsiniz.
- Ünsiyyət istiqaməti mənbədən hədəfə kimi müəyyən edilir. Və mənbə və hədəf node identifikatorları ilə göstərilir.
- Qrupa bir və ya daha çox qovşaq əlavə edilə bilər.
- Əlaqə həm qrupdan, həm də qrupdan müəyyən edilə bilər.
Bu sadə qaydalardan istifadə edərək aşağıdakı diaqramı alırıq. Sadəcə? Olduqca.
Və o, aşağıdakı js kodu ilə təsvir olunur. Burada əsas şey elementlər obyektidir. Hansı qovşaqlarda göstərilir - qovşaqlar, kənarlar - əlaqələr.
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);
Əlbəttə ki, mən dövrənin rəsmini özüm hazırlamadım, ancaq kitabxanadan istifadə etdim çox güclü vizuallaşdırma vasitəsidir. Mən həllimdə imkanların yalnız bir hissəsindən istifadə edirəm.
Yaxşı, bu sadə bir nümunədir. Daha mürəkkəb ola bilərmi?
Bəli, zəhmət olmasa. Mövqeləri göstərmək üçün mövqelərdən istifadə edirik, qrupları göstərmək üçün qruplardakı qrupların siyahısını göstəririk və elementlərin özləri də qrup atributuna malikdir.
Və bu koddur:
<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>
Bir tərəfdən, belə bir sxem noutbukda demək olar ki, bir neçə kod ekranıdır, digər tərəfdən, a la json strukturu bütün məlumatları analogiya ilə doldurmağa imkan verir, tez bir zamanda kopyalaya və yapışdıra bilərsiniz.
Niyə mövqelər qovşaqlardan ayrı yerləşdirilir?
Daha rahatdır. Əvvəlcə qovşaqları təyin edirik. Sonra bir neçə qrup təyin edə və onları qovşaqlarda göstərə bilərik. Sonra əlaqələri təyin edirik. Və yalnız bundan sonra, əsas obyektlər və onların arasında əlaqələr olduqda, biz diaqramda bu obyektlərin yerini alırıq. Və ya əksinə.
Vəzifələr olmadan mümkündürmü?
Vəzifəsiz də mümkündür. Ancaq bir az əzik olacaq, bu seçimi nümunələrdə görə bilərsiniz. Bu, sitoskap üçün qovşaqların yerləşdirilməsi alqoritminin olması ilə bağlıdır , bu da qrupların mövcudluğunu nəzərə alır. Mövqelərin göstərilməsi diaqramı daha idarəolunan edir, lakin diaqramın ilk qaralama mərhələsində bu mövqelərsiz mümkündür.
Vəzifələr Döyüş gəmisi üslubunda da müəyyən edilə bilər. Bunlar. bir node a1-də, digəri isə d5-də yerləşir. Xüsusilə cytoscape-in kətan üzərindəki obyektləri hərəkətli hala gətirməsinə kömək edir, yəni. biz onları hərəkət etdirə, müxtəlif layout variantlarına baxa və sonra kodda bəyəndiyimiz elementlərin düzülməsini düzəldə bilərik.
Ümumiyyətlə, başa düşüləndir. Siz də cəhd edə bilərsiniz?
Əlbəttə ki, tez dövrə yaratmaq üçün özümü kiçik etdim , özü sxemi yeniləyir və ən son versiyanı brauzerdə (localStorage-də) saxlayır.
Siz cəhd etmisiniz? İndi onu səhifənizə əlavə edə bilərsiniz.
Sonra yenidən:
1. Skriptin bağlanması
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Html-ə kod əlavə edin
<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. kodu bizə lazım olan diaqrama düzəldirik (məncə bayquş çəkməkdən daha asandır :)
Ətraflı məlumat ünvanında github-da.
Nəticədə?
Məqsədlərimə çatdım - sənədlərə daxili diaqramlar əlavə etmək, format olduqca sadə və başa düşüləndir. Super sxemlər üçün uyğun deyil, lakin əlaqələrin strukturunu izah edən kiçik sxemlər üçün tamamilə yaxşıdır. Siz həmişə tez bir zamanda nəyisə dəyişə və dəyişə bilərsiniz. Bəli və həmkarlar özləri dokda bir şeyi düzəldə bilərlər, heç olmasa obyektlər üçün başlıqlar, xüsusi təlim olmadan))
Nə təkmilləşdirmək olar?
Burada təbii ki, bir çox variant var. Əlavə nişanlar əlavə edin (bütün mövcud olanlar skriptə daxili əlavə olunur). Daha ifadəli nişanlar dəsti seçin. Bağlantı xəttinin üslubunu təyin etməyə imkan verin. Fon şəkli əlavə edin.
Nə fikirləşirsən?
Artıq məsələlərdə həyata keçirmək üçün bir neçə ideyam var, siz də şərhlərdə öz fikirlərini əlavə edə bilərsiniz.
Mənim həllim mütləq problemlərin dar diapazonunda tətbiq oluna bilər və bəlkə siz sadəcə onları kodlaşdırmaqla diaqramları çəkmək üçün daha əlverişli alət tapa bilərsiniz - necə deyərlər "diaqramınızı kod kimi göstərin"
- (9 növ diaqramların onlayn redaktoru)
- Əgər super təfərrüatlı və mürəkkəb diaqramları sevirsinizsə, o zaman bu layihəyə heyran qalacaqsınız:
Mənbə: www.habr.com