ජාල රූප සටහන කේතය ලෙස / ජාල රූප සටහන කේතය ලෙස

පසුගිය වසර කිහිපය තුළ මම ලේඛන කටයුතුවලට වැඩිපුර සම්බන්ධ වුණා. යම් පද්ධතියක් ක්‍රියා කරන ආකාරය පිළිබඳ පැහැදිලි කිරීමේ පෙළක් ලිවීම සාමාන්‍යයෙන් තරමක් සරල ය. සියලුම ප්‍රධාන වස්තු සහ මෙම වස්තූන් අතර සම්බන්ධතා පෙන්වන රූප සටහනක් ඇඳීම ද පහසුය.

නමුත් වඩාත්ම ගැටළු සහගත අංගය වන්නේ මෙම ලියකියවිලි යාවත්කාලීනව තබා ගැනීමයි. සහ පෙළ හොඳයි, නමුත් රූප සටහන්... මොකද... සියලුම ලියකියවිලි මාර්ගගතව ඇත, i.e. html ආකෘතියෙන්, පසුව පෙළ gif/jpeg/png පින්තූර සමඟ ඇත, එය ඇත්ත වශයෙන්ම රූප සටහන් පෙන්වයි. තවද Visio හෝ online services a la draw.io වැනි විවිධ වැඩසටහන් වල රූප සටහන් ඇඳ ඇත. එවිට ඔබ රූප සටහන ග්‍රැෆික් ආකෘතියට අපනයනය කර එය html වෙත අමුණන්න. ඒක සරලයි.

ප්රශ්නය මොකක්ද?

යෝජනා ක්රම සාමාන්යයෙන් සරලයි. වඩාත් නිවැරදිව, ඉතා සංකීර්ණ නොවේ. ඔව්, වස්තූන් ගණන දුසිමක් හෝ දෙකක් වේ, සම්බන්ධතා ගණන ආසන්න වශයෙන් සමාන වේ. ප්ලස් අත්සන්, සමහර තනතුරු. සරල යෝජනා ක්‍රම වචන වලින් විස්තර කළ හැකි නමුත් ඉතා සංකීර්ණ ඒවා, අහ්... (ඇ) "ඔවුන්ට තේරෙන්නේ නැහැ, සර්." බොහෝ යෝජනා ක්රම තිබේ, ඒවාට කලින් කලට වෙනස්කම් සිදු කළ යුතුය, එපිසෝඩික් ලෙස, i.e. නිරන්තරයෙන්, නිසා ඔවුන් අපගේ නිෂ්පාදන සංවර්ධනය අනුගමනය කරයි.

ඔබට සේවාවේ html ඇතුළත් කළ හැකිය. ඔබ එය උත්සාහ කර තිබේද?

ඔව්, සහතිකයි. උදාහරණයක් ලෙස, මම gliffy.com වෙතින් ග්‍රැෆික්ස් වලට කැමතියි. නමුත් වෙනස්කම් කිරීමට, ඔබ තෙවන පාර්ශවීය සේවාවකට ගොස් එහි සංස්කරණය කළ යුතුය. සහ සගයකුට නිවැරදි කිරීම් පැවරීම වඩා දුෂ්කර ය.

මම කළ යුත්තේ කුමක්ද?

මෑතකදී මම නිර්දේශයන් තුළ Github හි ගබඩාවක් හමු විය 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>

එක් අතකින්, එවැනි යෝජනා ක්‍රමයක් ලැප්ටොප් එකක කේත තිරයන් කිහිපයක් පාහේ වන අතර, අනෙක් අතට, a la json ව්‍යුහය මඟින් සියලුම දත්ත ප්‍රතිසමයෙන් පුරවා ගැනීමට ඔබට ඉඩ සලසයි, ඔබට ඉක්මනින් පිටපත් කළ හැකිය.

නෝඩ් වලින් වෙන වෙනම ස්ථාන තබා ඇත්තේ ඇයි?

එය වඩාත් සුවපහසුයි. පළමුව අපි නෝඩ් නියම කරමු. එවිට අපට කණ්ඩායම් කිහිපයක් නියම කර ඒවා නෝඩ් වලින් දැක්විය හැකිය. එවිට අපි සම්බන්ධතා නම් කරන්නෙමු. එවිට පමණක්, ඒවා අතර ප්‍රධාන වස්තූන් සහ සම්බන්ධතා ඇති විට, අපි රූප සටහනේ මෙම වස්තූන් ඇති ස්ථානය ගනිමු. නැතහොත් අනෙක් අතට.

තනතුරු නොමැතිව එය කළ හැකිද?

තනතුරු නොමැතිව එය කළ හැකිය. නමුත් එය ටිකක් ගරා වැටෙනු ඇත; ඔබට මෙම විකල්පය උදාහරණ වලින් දැකිය හැකිය. මෙයට හේතුව සයිටොස්කේප් සඳහා නෝඩ් පිහිටීම සඳහා ඇල්ගොරිතමයක් තිබීමයි. fcose, කණ්ඩායම් පැමිණීම ද සැලකිල්ලට ගනී. ස්ථාන නියම කිරීම රූප සටහන වඩාත් පාලනය කරයි, නමුත් රූප සටහනේ පළමු කෙටුම්පතේ අදියරේදී එය ස්ථාන නොමැතිව කළ හැකිය.

තනතුරු ද Battleship ශෛලිය තුල සඳහන් කළ හැක. එම. එක් නෝඩයක් a1 හි ද අනෙක d5 හි ද පිහිටා ඇත. එය විශේෂයෙන්ම සයිටොස්කේප් කැන්වසය මත ඇති වස්තූන් චලනය කිරීමට උපකාරී වේ, i.e. අපට ඒවා එහා මෙහා ගෙන යා හැකිය, විවිධ පිරිසැලසුම් විකල්ප බලන්න, ඉන්පසු කේතයේ අප කැමති මූලද්‍රව්‍යවල සැකැස්ම සකස් කරන්න.

පොදුවේ, එය තේරුම් ගත හැකි ය. ඔබටත් උත්සාහ කළ හැකිද?
 
ඇත්ත වශයෙන්ම, ඉක්මනින් පරිපථ නිර්මාණය කිරීම සඳහා, මම කුඩා එකක් බවට පත් කළා සංස්කාරකය, එයම ස්කීමා යාවත්කාලීන කර නවතම අනුවාදය බ්‍රවුසරයේ ගබඩා කරයි (දේශීය ගබඩාවේ).

ඔබ එය උත්සාහ කර තිබේද? ඔබට දැන් එය ඔබගේ පිටුවට එක් කළ හැක.

ඉන්පසු නැවතත්:

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 මත.

අවසානයේදී කුමක් ද?

මම මගේ අරමුණු සාක්ෂාත් කර ගත්තා - ලේඛනගත කිරීම සඳහා පේළිගත රූප සටහන් එකතු කිරීම සඳහා, ආකෘතිය තරමක් සරල සහ තේරුම්ගත හැකි ය. එය සුපිරි පරිපථ සඳහා සුදුසු නොවේ, නමුත් සම්බන්ධතා ව්යුහය පැහැදිලි කරන කුඩා පරිපථ සඳහා, එය සම්පූර්ණයෙන්ම හොඳයි. ඔබට සෑම විටම ඉක්මනින් වෙනස් කර කාලයත් සමඟ යමක් වෙනස් කළ හැකිය. ඔව්, සහ සගයන්ට තටාකයේ යමක් නිවැරදි කළ හැකිය, අවම වශයෙන් වස්තූන් සඳහා සිරස්තල, විශේෂ පුහුණුවක් නොමැතිව))

වැඩිදියුණු කළ හැක්කේ කුමක්ද?

ඇත්ත වශයෙන්ම, මෙහි බොහෝ විකල්ප තිබේ. අමතර අයිකන එක් කරන්න (පවතින සියලුම ඒවා ස්ක්‍රිප්ටයට පේළිගතව එක් කෙරේ). වඩාත් ප්‍රකාශිත අයිකන කට්ටලයක් තෝරන්න. සම්බන්ධතා රේඛාවේ විලාසය නියම කිරීමට හැකි කරන්න. පසුබිම් රූපයක් එක් කරන්න.

ඔයා සිතන්නේ කුමක් ද?
 
ගැටළු වලදී ක්‍රියාත්මක කිරීම සඳහා මට දැනටමත් අදහස් කිහිපයක් තිබේ, ඔබට අදහස් දැක්වීමේදී ඔබේ අදහස් ද එක් කළ හැකිය.

• ගබඩාව
• උදාහරණ
• මාර්ගගත සංස්කාරක

මගේ විසඳුම අනිවාර්යයෙන්ම පටු පරාසයක ගැටළු වලට අදාළ වන අතර, සමහර විට ඔබට ඒවා සරලව කේතනය කිරීමෙන් රූප සටහන් ඇඳීම සඳහා වඩාත් පහසු මෙවලමක් සොයාගත හැකිය - ඔවුන් පවසන පරිදි 'ඔබේ රූප සටහන කේතයක් ලෙස පෙන්වන්න'

1. ලස්සන තේරීමක්
2. විශිෂ්ට සේවාවක් (ප්‍රස්ථාර වර්ග 9ක් මාර්ගගත සංස්කාරක)
3. ඇත්ත වශයෙන්ම, mermaid.js
4. ඔබ සුපිරි සවිස්තරාත්මක සහ සංකීර්ණ රූප සටහන් වලට කැමති නම්, ඔබ අනිවාර්යයෙන්ම මෙම ව්‍යාපෘතිය අගය කරනු ඇත: go.drawthe.net

මූලාශ්රය: www.habr.com