നെറ്റ്‌വർക്ക് ഡയഗ്രം കോഡായി / നെറ്റ്‌വർക്ക് ഡയഗ്രം കോഡായി

കഴിഞ്ഞ രണ്ട് വർഷങ്ങളായി ഞാൻ ഡോക്യുമെന്റേഷനിൽ കൂടുതൽ ഇടപെടുന്നു. ഈ അല്ലെങ്കിൽ ആ സിസ്റ്റം എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ച് ഒരു വിശദീകരണ വാചകം എഴുതുന്നത് പൊതുവെ വളരെ ലളിതമാണ്. എല്ലാ പ്രധാന വസ്തുക്കളും ഈ വസ്തുക്കൾ തമ്മിലുള്ള കണക്ഷനുകളും പ്രദർശിപ്പിക്കുന്ന ഒരു ഡയഗ്രം വരയ്ക്കുന്നതും വളരെ എളുപ്പമാണ്.

എന്നാൽ ഏറ്റവും പ്രശ്നകരമായ വശം ഈ ഡോക്യുമെന്റേഷൻ കാലികമായി സൂക്ഷിക്കുക എന്നതാണ്. വാചകം നന്നായിരിക്കും, പക്ഷേ ഡയഗ്രമുകൾ... കാരണം... എല്ലാ ഡോക്യുമെന്റേഷനുകളും ഓൺലൈനിലാണ്, അതായത്. html ഫോർമാറ്റിൽ, ടെക്സ്റ്റിനൊപ്പം gif/jpeg/png ചിത്രങ്ങൾ ഉണ്ട്, അത് യഥാർത്ഥത്തിൽ ഡയഗ്രമുകൾ കാണിക്കുന്നു. കൂടാതെ Visio അല്ലെങ്കിൽ ഓൺലൈൻ സേവനങ്ങൾ a la draw.io പോലുള്ള വിവിധ പ്രോഗ്രാമുകളിൽ ഡയഗ്രമുകൾ വരയ്ക്കുന്നു. തുടർന്ന് നിങ്ങൾ ഡയഗ്രം ഗ്രാഫിക് ഫോർമാറ്റിലേക്ക് എക്‌സ്‌പോർട്ടുചെയ്‌ത് html-ലേക്ക് അറ്റാച്ചുചെയ്യുക. ഇത് ലളിതമാണ്.

എന്താണ് പ്രശ്നം?

സ്കീമുകൾ സാധാരണയായി ലളിതമാണ്. കൂടുതൽ കൃത്യമായി പറഞ്ഞാൽ, വളരെ സങ്കീർണ്ണമല്ല. അതെ, ഒബ്‌ജക്‌റ്റുകളുടെ എണ്ണം ഒരു ഡസനോ രണ്ടോ ആണ്, കണക്ഷനുകളുടെ എണ്ണം ഏകദേശം തുല്യമാണ്. കൂടാതെ ഒപ്പുകൾ, ചില പദവികൾ. ലളിതമായ സ്കീമുകൾ വാക്കുകളിൽ വിവരിക്കാം, പക്ഷേ വളരെ സങ്കീർണ്ണമായവ, അഹം... (സി) "അവർക്ക് മനസ്സിലാകില്ല, സർ." നിരവധി സ്കീമുകൾ ഉണ്ട്, അവയിൽ ഇടയ്ക്കിടെ മാറ്റങ്ങൾ വരുത്തേണ്ടതുണ്ട്, എപ്പിസോഡിക് ആയി, അതായത്. നിരന്തരം, കാരണം അവർ ഞങ്ങളുടെ ഉൽപ്പന്നങ്ങളുടെ വികസനം പിന്തുടരുന്നു.

നിങ്ങൾക്ക് സേവനത്തിന്റെ html ഉൾപ്പെടുത്താം. നിങ്ങൾ പരീക്ഷിച്ചിട്ടുണ്ടോ?

അതെ, തീർച്ച. ഉദാഹരണത്തിന്, എനിക്ക് gliffy.com-ൽ നിന്നുള്ള ഗ്രാഫിക്സ് ഇഷ്ടമാണ്. എന്നാൽ മാറ്റങ്ങൾ വരുത്താൻ, നിങ്ങൾ ഒരു മൂന്നാം കക്ഷി സേവനത്തിലേക്ക് പോയി അവിടെ എഡിറ്റ് ചെയ്യേണ്ടതുണ്ട്. ഒരു സഹപ്രവർത്തകന് തിരുത്തലുകൾ നിയോഗിക്കുന്നത് കൂടുതൽ ബുദ്ധിമുട്ടാണ്.

ഞാൻ എന്തു ചെയ്യണം?

അടുത്തിടെ ഞാൻ ശുപാർശകളിൽ ഗിത്തബിൽ ഒരു ശേഖരം കണ്ടു github.com/RaoulMeyer/diagram-as-code. കോഡായി ഡയഗ്രം. ആ. നമുക്ക് ആവശ്യമുള്ള സർക്യൂട്ട് js-ൽ വിവരിക്കുന്നു. മറ്റ് ഡോക്യുമെന്റേഷൻ ടെക്‌സ്‌റ്റ് ഉള്ള അതേ html-ൽ ഞങ്ങൾ ഈ js നേരിട്ട് എഴുതുന്നു.

വഴിയിൽ, ഞാൻ ഡോക്യുമെന്റേഷൻ എഴുതുന്നത് പൂർണ്ണമായും 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, ഇത് ഗ്രൂപ്പുകളുടെ സാന്നിധ്യവും കണക്കിലെടുക്കുന്നു. സ്ഥാനങ്ങൾ വ്യക്തമാക്കുന്നത് ഡയഗ്രം കൂടുതൽ നിയന്ത്രിക്കാവുന്നതാക്കുന്നു, എന്നാൽ ഡയഗ്രാമിന്റെ ആദ്യ ഡ്രാഫ്റ്റിന്റെ ഘട്ടത്തിൽ സ്ഥാനങ്ങളില്ലാതെ ഇത് സാധ്യമാണ്.

ബാറ്റിൽഷിപ്പ് ശൈലിയിലും സ്ഥാനങ്ങൾ വ്യക്തമാക്കാം. ആ. ഒരു നോഡ് 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