د شبکې ډیاګرام د کوډ په توګه / د شبکې ډیاګرام د کوډ په توګه

په تیرو څو کلونو کې زه په اسنادو کې ډیر ښکیل شوی یم. د یو ځانګړي سیسټم د کار کولو څرنګوالي په اړه د توضیحي متن لیکل عموما خورا ساده دي. د یو ډیاګرام رسم کول چې ټول کلیدي شیان به ښکاره کړي او د دې شیانو ترمینځ اړیکې هم خورا اسانه دي.

مګر ترټولو ستونزمن اړخ د دې اسنادو تازه ساتل دي. او متن به ښه وي، مګر ډیاګرامونه ... ځکه ... ټول اسناد آنلاین دي، د مثال په توګه په html بڼه کې، بیا متن د gif/jpeg/png انځورونو سره یوځای کیږي، کوم چې په حقیقت کې ډیاګرام ښیي. او ډیاګرامونه په مختلفو برنامو لکه ویزیو یا آنلاین خدماتو a la draw.io کې رسم شوي. بیا تاسو ډیاګرام په ګرافیک شکل کې صادر کړئ او html سره یې وصل کړئ. دا ساده ده.

ستونزه څه ده؟

سکیمونه معمولا ساده دي. ډیر دقیق، ډیر پیچلی ندی. هو، د شیانو شمیر یو درجن یا دوه دی، د اړیکو شمیر نږدې ورته دی. جمع لاسلیکونه، ځینې نومونه. ساده سکیمونه په کلمو کې تشریح کیدی شي، مګر ډیر پیچلي، ahem ... (c) "دوی به نه پوهیږي، صاحب." ډیری سکیمونه شتون لري، بدلونونو ته اړتیا لري چې په دوره توګه، په پیښو کې، د بیلګې په توګه. په دوامداره توګه، ځکه دوی زموږ د محصولاتو پراختیا تعقیبوي.

تاسو کولی شئ د خدمت html ځای په ځای کړئ. ایا تاسو یې هڅه کړې؟

هو، یقینا. د مثال په توګه، زه د gliffy.com څخه ګرافیک خوښوم. مګر د بدلونونو لپاره، تاسو اړتیا لرئ چې د دریمې ډلې خدمت ته لاړ شئ او هلته یې ترمیم کړئ. او دا خورا ستونزمن کار دی چې یو همکار ته اصلاحات واستول شي.

زه باید څه وکړم؟

پدې وروستیو کې زه په وړاندیزونو کې په ګیتوب کې د ذخیره کولو سره مخ شوم github.com/RaoulMeyer/diagram-as-code. ډیاګرام د کوډ په توګه. هغوی. موږ هغه سرکټ تشریح کوو چې موږ ورته په js کې اړتیا لرو. موږ دا js مستقیم په ورته html کې لیکو چیرې چې د نورو اسنادو متن دی.

په لاره کې، زه اسناد لیکم په بشپړ ډول په html کې نه. عموما، اسناد د مارک ډاون متن سره د فایلونو مجموعه ده، کوم چې بیا د ځینې انجن لخوا د بشپړ اسنادو سایټ ته بدلیږي، د بیلګې په توګه وینټرسمیت. یا د ویکي سیسټم.

دا خورا اسانه شو: موږ متن لیکلی ، بیا د سکریپټ ټګ خلاصیږي او د سکیم JS کوډ پدې کې تشریح شوی.

بیا څه بده ده؟

ما دا ذخیره خوښه کړه، مګر دا یوازینۍ بیلګه نه ده چیرې چې ډیاګرام د کوډ یا متن نمایندګۍ په کارولو سره رسم شوی. (د مقالې په پای کې به د پروژو او مقالو لینکونه وي چې ما د کوډ په توګه د موضوع ډیاګرام کې ګوګل کړی.)

او زه یوازینی نه یم چې د اسنادو ترمیم کوم. ځینې ​​​​وختونه همکاران هم مرسته کوي - یوه کلمه سمه کړئ، توضیحات بدل کړئ، نوي انځورونه داخل کړئ. 

له همدې امله، زه غواړم دا ډیاګرام د لوستلو وړ، د پوهیدو وړ متن بڼه کې وګورم چې د زده کړې اوږدې مودې ته اړتیا نلري. او په ځینو ځایونو کې تاسو حتی کولی شئ په ساده ډول د نوي سرکټ اضافه کولو ګړندي کولو لپاره کاپي پیسټ کړئ. 

او یو بل همکار یادونه وکړه چې کوډ، البته، ښه دی، مګر که تاسو جوړښت وکاروئ، هرڅه خورا سخت او څرګند کیدی شي.

له همدې امله ما هڅه وکړه چې ډیاګرام د څو کوچنیو صفونو د سیټ په توګه تصور کړم چې نوډونه، اړیکې، د نوډونو ګروپونه، او همدارنګه د نوډونو موقعیت بیانوي. دا معلومه شوه، زما په عاجز نظر، خورا مناسب، که څه هم، البته، خوند او رنګ ...

دا څنګه په یو صف کې یو چارټ دی؟

• هر نوډ د یو پیژندونکي لخوا تشریح شوی چې په ځانګړي ډول نوډ پیژني.
• تاسو کولی شئ نوډ ته یو عکس هم اضافه کړئ او یو لیک اضافه کړئ.
• تاسو کولی شئ د دوو نوډونو ترمنځ اړیکه مشخص کړئ.
• په ډیاګرام کې د اړیکو لپاره، تاسو کولی شئ رنګ او لیکنه تنظیم کړئ.
• د مخابراتو سمت د سرچینې څخه هدف ته تعریف شوی. او سرچینه او هدف د نوډ پیژندونکو لخوا په ګوته شوي.
• یو یا څو نوډونه په ګروپ کې اضافه کیدی شي.
• اړیکه هم د ډلې او ډلې څخه دواړه مشخص کیدی شي.

د دې ساده قواعدو په کارولو سره، موږ لاندې انځور ترلاسه کوو. بس؟ کافي.

او دا د لاندې js کوډ لخوا تشریح شوی. دلته اصلي شی د عناصرو اعتراض دی. په کوم کې نوډونه اشاره شوي - نوډونه، څنډې - اړیکې.
 

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

البته ، زه پخپله د سرکټ ډراینګ سره نه یم راغلی ، مګر کتابتون یې کارولی cytoscape.js د لید لید خورا پیاوړی وسیله ده. زه یوازې زما په حل کې د امکاناتو یوه برخه کاروم. 

ښه، دا یو ساده مثال دی. ایا دا ډیر پیچلی کیدی شي؟

هو لورېينه وکړه. د پوستونو د ښودلو لپاره، موږ پوستونه کاروو، د ډلو په نښه کولو لپاره، موږ په ګروپونو کې د ډلو لیست په ګوته کوو، او عناصر پخپله د ګروپ ځانګړتیا لري.

او دا کوډ دی:

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

له یوې خوا، دا ډول سکیم په لپ ټاپ کې د کوډونو نږدې څو سکرینونه دي، له بلې خوا، د لا json جوړښت تاسو ته اجازه درکوي چې ټول معلومات د انډول په واسطه ډک کړئ، په چټکۍ سره او تاسو کولی شئ کاپي پیسټ کړئ.

ولې پوستونه د نوډونو څخه جلا ساتل کیږي؟

دا ډیر آرام دی. لومړی موږ نوډونه مشخص کوو. بیا موږ کولی شو یو څو ډلې مشخص کړو او په نوډونو کې یې په ګوته کړو. بیا موږ اړیکې ډیزاین کوو. او یوازې بیا، کله چې اصلي توکي او د دوی ترمنځ اړیکې شتون ولري، موږ د دې شیانو موقعیت په ډیاګرام کې اخلو. یا برعکس.

ایا دا د پوستونو پرته ممکنه ده؟

دا د پوستونو پرته ممکنه ده. مګر دا به یو څه ټوټه ټوټه وي؛ تاسو کولی شئ دا اختیار په مثالونو کې وګورئ. دا د دې حقیقت له امله دی چې د سایټوسکیپ لپاره د نوډونو موقعیت لپاره الګوریتم شتون لري fcose، کوم چې د ډلو شتون هم په پام کې نیسي. د موقعیتونو مشخص کول ډیاګرام ډیر کنټرول وړ کوي ، مګر د ډیاګرام د لومړۍ مسودې په مرحله کې دا پرته له موقعیتونو امکان لري.

موقعیتونه د جنګیالیو سټایل کې هم مشخص کیدی شي. هغوی. یو نوډ په A1 کې موقعیت لري، او بل په d5 کې. دا په ځانګړې توګه مرسته کوي چې سایټوسکیپ په کینوس کې شیان د حرکت وړ کړي، د بیلګې په توګه. موږ کولی شو دوی شاوخوا حرکت وکړو، د ترتیب مختلف انتخابونه وګورو، او بیا د هغه عناصرو ترتیب تنظیم کړو چې موږ یې په کوډ کې خوښوو.

په عموم کې، دا د پوهیدو وړ دی. تاسو هم هڅه کولی شئ؟
 
البته، د چټک سرکټونو جوړولو لپاره، ما خپل ځان یو کوچنی جوړ کړ سمونګر، کوم چې پخپله سکیما تازه کوي او وروستۍ نسخه په براوزر کې ذخیره کوي (په محلي ذخیره کې).

ایا تاسو یې هڅه کړې؟ تاسو اوس کولی شئ دا په خپل پاڼه کې اضافه کړئ.

بیا بیا:

1. د سکریپټ نښلول

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

2. 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. موږ کوډ هغه ډیاګرام ته ایډیټ کوو چې موږ ورته اړتیا لرو (زما په اند دا د الو رسم کولو څخه اسانه دی :)

نور جزیات په کې د پروژې پاڼه په ګیتوب کې

په پای کې څه شی دی؟

ما خپل اهداف ترلاسه کړل - په اسنادو کې د انلاین ډیاګرامونو اضافه کولو لپاره، بڼه خورا ساده او د پوهیدو وړ ده. دا د سوپر سرکیټونو لپاره مناسب نه دی، مګر د کوچنیو سرکیټونو لپاره چې د اړیکو جوړښت تشریح کوي، دا بالکل ښه دی. تاسو کولی شئ تل په چټکۍ سره ټیک کړئ او د وخت په تیریدو سره یو څه بدل کړئ. هو، او همکاران کولی شي پخپله په ډاک کې یو څه سم کړي، لږترلږه د شیانو لپاره سرلیکونه، پرته له ځانګړې روزنې))

څه شی ښه کیدی شي؟

البته، دلته ډیری اختیارونه شتون لري. اضافي شبیهونه اضافه کړئ (ټول موجود په سکریپټ کې انلاین اضافه شوي). د عکسونو ډیر څرګند سیټ غوره کړئ. دا ممکنه کړئ چې د اتصال لاین سټایل مشخص کړئ. د شاليد عکس اضافه کړئ.

ته څه فکر کوی؟
 
زه دمخه په مسلو کې د پلي کولو لپاره ډیری نظرونه لرم ، تاسو کولی شئ خپل نظرونه هم په نظرونو کې اضافه کړئ.

• ذخیره
• مثالونه
• آنلاین مدیر

زما حل یقینا د ستونزو په یوه محدوده لړۍ کې د تطبیق وړ دی، او شاید تاسو به په ساده ډول د کوډ کولو له لارې د ډیاګرامونو د انځور کولو لپاره خورا اسانه وسیله ومومئ - لکه څنګه چې دوی وايي 'ما ته خپل ډیاګرام د کوډ په توګه وښایاست'

1. ښه انتخاب
2. لوی خدمت (د چارټونو 9 ډوله آنلاین مدیر)
3. البته، mermaid.js
4. او که تاسو خورا تفصيلي او پیچلي ډیاګرامونه خوښ کړئ ، نو تاسو به یقینا د دې پروژې ستاینه وکړئ: go.drawthe.net

سرچینه: www.habr.com