🥇نمودار شبکه به عنوان کد / نمودار شبکه به عنوان کد

در یکی دو سال اخیر بیشتر درگیر مستندسازی شده ام. نوشتن یک متن توضیحی در مورد نحوه عملکرد یک سیستم خاص به طور کلی بسیار ساده است. ترسیم نموداری که تمام اشیاء کلیدی و اتصالات بین این اشیاء را نمایش دهد نیز بسیار آسان است.

اما مشکل سازترین جنبه به روز نگه داشتن این اسناد است. و متن خوب خواهد بود، اما نمودارها... چون... تمام اسناد آنلاین هستند، یعنی در فرمت html، سپس متن با تصاویر gif/jpeg/png همراه می شود که در واقع نمودارها را نشان می دهد. و نمودارها در برنامه های مختلفی مانند Visio یا خدمات آنلاین a la draw.io ترسیم می شوند. سپس نمودار را به فرمت گرافیکی صادر می کنید و آن را به html متصل می کنید. ساده است.

مشکل چیه؟

طرح ها معمولا ساده هستند. به طور دقیق تر، خیلی پیچیده نیست. بله، تعداد اشیاء یک دوجین یا دو است، تعداد اتصالات تقریباً یکسان است. به علاوه امضاها، برخی از نامگذاری ها. طرح‌های ساده را می‌توان با کلمات توصیف کرد، اما طرح‌های بسیار پیچیده، اه... (ج) "آنها نمی‌فهمند، آقا." طرح های زیادی وجود دارد، باید تغییراتی در آنها به صورت دوره ای، اپیزودیک، یعنی. به طور مداوم، زیرا آنها توسعه محصولات ما را دنبال می کنند.

می توانید html سرویس را جاسازی کنید. این را امتحان کرده ای؟

بله حتما. به عنوان مثال، من گرافیک gliffy.com را دوست دارم. اما برای ایجاد تغییرات، باید به یک سرویس شخص ثالث بروید و آنجا را ویرایش کنید. و واگذاری اصلاحات به همکار دشوارتر است.

چه کاری انجام دهید؟

اخیراً با یک مخزن در Github در توصیه ها روبرو شدم github.com/RaoulMeyer/diagram-as-code. نمودار به عنوان کد آن ها ما مدار مورد نیاز خود را در js شرح می دهیم. این js را مستقیماً در همان html می نویسیم که متن اسناد دیگر در آن قرار دارد.

ضمناً من مستندات را نه به طور کامل در html می نویسم. به طور معمول، اسناد مجموعه‌ای از فایل‌ها با متن علامت‌گذاری است که سپس توسط برخی موتورها، به عنوان مثال، Wintersmith به یک سایت مستندسازی کامل تبدیل می‌شود. یا یک سیستم ویکی.

بسیار راحت به نظر می رسد: ما متن را نوشته ایم، سپس برچسب اسکریپت باز می شود و کد 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>

از یک طرف ، چنین طرحی تقریباً چند صفحه کد روی لپ تاپ است ، از طرف دیگر ، ساختار a la json به شما امکان می دهد تمام داده ها را با قیاس ، به سرعت پر کنید و می توانید کپی-پیست کنید.

چرا موقعیت ها جدا از گره ها قرار می گیرند؟

راحت تر است. ابتدا گره ها را مشخص می کنیم. سپس می توانیم چند گروه را مشخص کرده و آنها را در گره ها نشان دهیم. سپس اتصالات را مشخص می کنیم. و تنها پس از آن، زمانی که اشیاء اصلی و اتصالات بین آنها وجود داشته باشد، محل این اشیاء را در نمودار می گیریم. یا برعکس.

آیا بدون موقعیت ممکن است؟

بدون موقعیت ممکن است. اما کمی مچاله خواهد شد؛ این گزینه را می توانید در مثال ها ببینید. این به دلیل این واقعیت است که یک الگوریتم برای مکان گره ها برای cytoscape وجود دارد fcose، که حضور گروه ها را نیز در نظر می گیرد. تعیین موقعیت ها، نمودار را قابل کنترل تر می کند، اما در مرحله اولین پیش نویس نمودار، بدون موقعیت امکان پذیر است.

موقعیت ها را می توان در سبک Battleship نیز مشخص کرد. آن ها یک گره در a1 و دیگری در d5 قرار دارد. این به ویژه کمک می کند که cytoscape اشیاء روی بوم را متحرک کند، یعنی. می‌توانیم آن‌ها را جابه‌جا کنیم، گزینه‌های طرح‌بندی مختلف را ببینیم، و سپس آرایش عناصری را که دوست داریم در کد اصلاح کنیم.

به طور کلی، قابل درک است. شما همچنین می توانید امتحان کنید؟

البته برای ایجاد سریع مدارها، خودم را کوچک کردم سردبیر، که خود طرحواره را به روز می کند و آخرین نسخه را در مرورگر (در localStorage) ذخیره می کند.

این را امتحان کرده ای؟ اکنون می توانید آن را به صفحه خود اضافه کنید.

سپس دوباره:

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. ما کد را به نموداری که نیاز داریم ویرایش می کنیم (من فکر می کنم از ترسیم جغد راحت تر است :)

جزئیات بیشتر در صفحه پروژه در github.

نتیجه؟

من به اهدافم رسیدم - برای اضافه کردن نمودارهای درون خطی به اسناد، قالب بسیار ساده و قابل درک است. برای مدارهای فوق العاده مناسب نیست، اما برای مدارهای کوچکی که ساختار اتصالات را توضیح می دهند، کاملاً خوب است. همیشه می توانید به سرعت چیزی را در طول زمان تغییر دهید و تغییر دهید. بله، و همکاران می توانند چیزی را در حوض خود اصلاح کنند، حداقل شرح اشیاء، بدون آموزش خاص))

چه چیزی را می توان بهبود بخشید؟

البته در اینجا گزینه های زیادی وجود دارد. آیکون های اضافی اضافه کنید (همه آیکون های موجود به صورت خطی به اسکریپت اضافه می شوند). مجموعه ای گویاتر از نمادها را انتخاب کنید. امکان تعیین سبک خط اتصال را فراهم کنید. یک تصویر پس زمینه اضافه کنید.

شما چی فکر میکنید؟

من قبلاً چندین ایده برای پیاده سازی در مسائل دارم، شما همچنین می توانید ایده خود را در نظرات اضافه کنید.

راه حل من قطعاً در طیف محدودی از مشکلات قابل اجرا است، و شاید با کدنویسی ساده آنها ابزار راحت تری برای ترسیم نمودارها پیدا کنید - همانطور که می گویند "نمودار خود را به عنوان کد به من نشان دهید"

انتخاب خوب
خدمت رسانی عالی (9 نوع ویرایشگر آنلاین نمودار)
البته mermaid.js
و اگر نمودارهای بسیار دقیق و پیچیده را دوست دارید، قطعاً این پروژه را تحسین خواهید کرد: go.drawthe.net

منبع: www.habr.com

نمودار شبکه به عنوان کد / نمودار شبکه به عنوان کد

اضافه کردن نظر انصراف از پاسخ