🥇ನೆಟ್‌ವರ್ಕ್ ರೇಖಾಚಿತ್ರವನ್ನು ಕೋಡ್‌ನಂತೆ / ನೆಟ್‌ವರ್ಕ್ ರೇಖಾಚಿತ್ರವನ್ನು ಕೋಡ್‌ನಂತೆ

ಕಳೆದೆರಡು ವರ್ಷಗಳಲ್ಲಿ ನಾನು ದಾಖಲೀಕರಣದಲ್ಲಿ ಹೆಚ್ಚು ತೊಡಗಿಸಿಕೊಂಡಿದ್ದೇನೆ. ನಿರ್ದಿಷ್ಟ ವ್ಯವಸ್ಥೆಯು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ವಿವರಣಾತ್ಮಕ ಪಠ್ಯವನ್ನು ಬರೆಯುವುದು ಸಾಮಾನ್ಯವಾಗಿ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ಎಲ್ಲಾ ಪ್ರಮುಖ ವಸ್ತುಗಳು ಮತ್ತು ಈ ವಸ್ತುಗಳ ನಡುವಿನ ಸಂಪರ್ಕಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ರೇಖಾಚಿತ್ರವನ್ನು ಚಿತ್ರಿಸುವುದು ತುಂಬಾ ಸುಲಭ.

ಆದರೆ ಅತ್ಯಂತ ಸಮಸ್ಯಾತ್ಮಕ ಅಂಶವೆಂದರೆ ಈ ದಸ್ತಾವೇಜನ್ನು ನವೀಕೃತವಾಗಿರಿಸುವುದು. ಮತ್ತು ಪಠ್ಯವು ಉತ್ತಮವಾಗಿರುತ್ತದೆ, ಆದರೆ ರೇಖಾಚಿತ್ರಗಳು ... ಏಕೆಂದರೆ ... ಎಲ್ಲಾ ದಾಖಲೆಗಳು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿವೆ, ಅಂದರೆ. html ಸ್ವರೂಪದಲ್ಲಿ, ನಂತರ ಪಠ್ಯವು gif/jpeg/png ಚಿತ್ರಗಳೊಂದಿಗೆ ಇರುತ್ತದೆ, ಇದು ವಾಸ್ತವವಾಗಿ ರೇಖಾಚಿತ್ರಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ಮತ್ತು ರೇಖಾಚಿತ್ರಗಳನ್ನು ವಿಸಿಯೊ ಅಥವಾ ಆನ್‌ಲೈನ್ ಸೇವೆಗಳು a la draw.io ನಂತಹ ವಿವಿಧ ಕಾರ್ಯಕ್ರಮಗಳಲ್ಲಿ ಚಿತ್ರಿಸಲಾಗಿದೆ. ನಂತರ ನೀವು ರೇಖಾಚಿತ್ರವನ್ನು ಗ್ರಾಫಿಕ್ ಸ್ವರೂಪಕ್ಕೆ ರಫ್ತು ಮಾಡಿ ಮತ್ತು ಅದನ್ನು html ಗೆ ಲಗತ್ತಿಸಿ. ಇದು ಸರಳವಾಗಿದೆ.

ಏನು ಸಮಸ್ಯೆ?

ಯೋಜನೆಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸರಳವಾಗಿದೆ. ಹೆಚ್ಚು ನಿಖರವಾಗಿ, ತುಂಬಾ ಸಂಕೀರ್ಣವಾಗಿಲ್ಲ. ಹೌದು, ವಸ್ತುಗಳ ಸಂಖ್ಯೆಯು ಒಂದು ಡಜನ್ ಅಥವಾ ಎರಡು, ಸಂಪರ್ಕಗಳ ಸಂಖ್ಯೆಯು ಸರಿಸುಮಾರು ಒಂದೇ ಆಗಿರುತ್ತದೆ. ಜೊತೆಗೆ ಸಹಿಗಳು, ಕೆಲವು ಪದನಾಮಗಳು. ಸರಳವಾದ ಯೋಜನೆಗಳನ್ನು ಪದಗಳಲ್ಲಿ ವಿವರಿಸಬಹುದು, ಆದರೆ ತುಂಬಾ ಸಂಕೀರ್ಣವಾದವುಗಳು, ಆಹ್... (ಸಿ) "ಅವರಿಗೆ ಅರ್ಥವಾಗುವುದಿಲ್ಲ, ಸರ್." ಅನೇಕ ಯೋಜನೆಗಳಿವೆ, ನಿಯತಕಾಲಿಕವಾಗಿ, ಎಪಿಸೋಡಿಕ್ ಆಗಿ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಬೇಕಾಗಿದೆ, ಅಂದರೆ. ನಿರಂತರವಾಗಿ, ಏಕೆಂದರೆ ಅವರು ನಮ್ಮ ಉತ್ಪನ್ನಗಳ ಅಭಿವೃದ್ಧಿಯನ್ನು ಅನುಸರಿಸುತ್ತಾರೆ.

Можно же встраивать html сервиса. Пробовал?

ಖಂಡಿತವಾಗಿಯೂ. ಉದಾಹರಣೆಗೆ, ನಾನು gliffy.com ನಿಂದ ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಇಷ್ಟಪಡುತ್ತೇನೆ. ಆದರೆ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಲು, ನೀವು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸೇವೆಗೆ ಹೋಗಬೇಕು ಮತ್ತು ಅಲ್ಲಿ ಸಂಪಾದಿಸಬೇಕು. ಮತ್ತು ಸಹೋದ್ಯೋಗಿಗೆ ತಿದ್ದುಪಡಿಗಳನ್ನು ನಿಯೋಜಿಸಲು ಹೆಚ್ಚು ಕಷ್ಟ.

ಏನು ಮಾಡುವುದು?

ಇತ್ತೀಚೆಗೆ ನಾನು ಶಿಫಾರಸುಗಳಲ್ಲಿ ಗಿಥಬ್‌ನಲ್ಲಿ ರೆಪೊಸಿಟರಿಯನ್ನು ನೋಡಿದೆ github.com/RaoulMeyer/diagram-as-code. ಕೋಡ್‌ನಂತೆ ರೇಖಾಚಿತ್ರ. ಆ. js ನಲ್ಲಿ ನಮಗೆ ಅಗತ್ಯವಿರುವ ಸರ್ಕ್ಯೂಟ್ ಅನ್ನು ನಾವು ವಿವರಿಸುತ್ತೇವೆ. ಇತರ ದಾಖಲಾತಿ ಪಠ್ಯ ಇರುವ ಅದೇ html ನಲ್ಲಿ ನಾವು ಈ js ಅನ್ನು ನೇರವಾಗಿ ಬರೆಯುತ್ತೇವೆ.

ಮೂಲಕ, ನಾನು ದಸ್ತಾವೇಜನ್ನು ಸಂಪೂರ್ಣವಾಗಿ html ನಲ್ಲಿ ಬರೆಯುವುದಿಲ್ಲ. ವಿಶಿಷ್ಟವಾಗಿ, ದಸ್ತಾವೇಜನ್ನು ಮಾರ್ಕ್‌ಡೌನ್ ಪಠ್ಯದೊಂದಿಗೆ ಫೈಲ್‌ಗಳ ಗುಂಪಾಗಿದೆ, ನಂತರ ಅದನ್ನು ಕೆಲವು ಎಂಜಿನ್‌ನಿಂದ ಪೂರ್ಣ ಪ್ರಮಾಣದ ದಾಖಲಾತಿ ಸೈಟ್‌ಗೆ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ವಿಂಟರ್‌ಸ್ಮಿತ್. ಅಥವಾ ವಿಕಿ ವ್ಯವಸ್ಥೆ.

Получается очень удобно: вот мы написали текст, затем открывается тег script и в нем описан js код схемы.

ಮತ್ತೆ ಏನು ತಪ್ಪಾಗಿದೆ?

ನಾನು ಈ ರೆಪೊಸಿಟರಿಯನ್ನು ಇಷ್ಟಪಟ್ಟಿದ್ದೇನೆ, ಆದರೆ ಕೋಡ್ ಅಥವಾ ಪಠ್ಯ ಪ್ರಾತಿನಿಧ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ರೇಖಾಚಿತ್ರವನ್ನು ಚಿತ್ರಿಸಿದ ಏಕೈಕ ಉದಾಹರಣೆ ಇದಲ್ಲ. (ಲೇಖನದ ಕೊನೆಯಲ್ಲಿ ನಾನು ವಿಷಯದ ರೇಖಾಚಿತ್ರದಲ್ಲಿ ಕೋಡ್‌ನಂತೆ ಗೂಗಲ್ ಮಾಡಿದ ಯೋಜನೆಗಳು ಮತ್ತು ಲೇಖನಗಳಿಗೆ ಲಿಂಕ್‌ಗಳಿವೆ.)

ಮತ್ತು ನಾನು ದಸ್ತಾವೇಜನ್ನು ಸಂಪಾದಿಸುವ ಒಬ್ಬನೇ ಅಲ್ಲ. ಕೆಲವೊಮ್ಮೆ ಸಹೋದ್ಯೋಗಿಗಳು ಸಹ ಕೊಡುಗೆ ನೀಡುತ್ತಾರೆ - ಪದವನ್ನು ಸರಿಪಡಿಸಿ, ವಿವರಣೆಯನ್ನು ಬದಲಾಯಿಸಿ, ಹೊಸ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಿ.

ಆದ್ದರಿಂದ, ದೀರ್ಘವಾದ ಕಲಿಕೆಯ ರೇಖೆಯ ಅಗತ್ಯವಿಲ್ಲದ ಓದಬಲ್ಲ, ಅರ್ಥವಾಗುವ ಪಠ್ಯ ಸ್ವರೂಪದಲ್ಲಿ ರೇಖಾಚಿತ್ರವನ್ನು ನೋಡಲು ನಾನು ಬಯಸುತ್ತೇನೆ. ಮತ್ತು ಕೆಲವು ಸ್ಥಳಗಳಲ್ಲಿ ನೀವು ಹೊಸ ಸರ್ಕ್ಯೂಟ್ ಅನ್ನು ವೇಗಗೊಳಿಸಲು ಕಾಪಿ-ಪೇಸ್ಟ್ ಮಾಡಬಹುದು.

ಮತ್ತು ಇನ್ನೊಬ್ಬ ಸಹೋದ್ಯೋಗಿ ಗಮನಿಸಿದಂತೆ ಕೋಡ್, ಸಹಜವಾಗಿ, ಒಳ್ಳೆಯದು, ಆದರೆ ನೀವು ರಚನೆಯನ್ನು ಬಳಸಿದರೆ, ಎಲ್ಲವೂ ತುಂಬಾ ಕಟ್ಟುನಿಟ್ಟಾದ ಮತ್ತು ಅಭಿವ್ಯಕ್ತವಾಗಬಹುದು.

ಆದ್ದರಿಂದ, ನೋಡ್‌ಗಳು, ಸಂಪರ್ಕಗಳು, ನೋಡ್‌ಗಳ ಗುಂಪುಗಳು ಮತ್ತು ನೋಡ್‌ಗಳ ಸ್ಥಳವನ್ನು ವಿವರಿಸುವ ಹಲವಾರು ಸಣ್ಣ ಸರಣಿಗಳ ಗುಂಪಾಗಿ ರೇಖಾಚಿತ್ರವನ್ನು ಕಲ್ಪಿಸಲು ನಾನು ಪ್ರಯತ್ನಿಸಿದೆ. ಇದು ನನ್ನ ವಿನಮ್ರ ಅಭಿಪ್ರಾಯದಲ್ಲಿ, ಸಾಕಷ್ಟು ಅನುಕೂಲಕರವಾಗಿದೆ, ಆದರೂ, ಸಹಜವಾಗಿ, ರುಚಿ ಮತ್ತು ಬಣ್ಣ ...

ರಚನೆಯಲ್ಲಿ ಇದು ಹೇಗೆ ಚಾರ್ಟ್ ಆಗಿದೆ?

ಪ್ರತಿಯೊಂದು ನೋಡ್ ಅನ್ನು ಗುರುತಿಸುವ ಮೂಲಕ ವಿವರಿಸಲಾಗಿದೆ ಅದು ನೋಡ್ ಅನ್ನು ಅನನ್ಯವಾಗಿ ಗುರುತಿಸುತ್ತದೆ.
Также к узлу можно добавить иконку, добавить надпись.
ನೀವು ಎರಡು ನೋಡ್‌ಗಳ ನಡುವಿನ ಸಂಬಂಧವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.
ರೇಖಾಚಿತ್ರದಲ್ಲಿ ಸಂವಹನಕ್ಕಾಗಿ, ನೀವು ಬಣ್ಣ ಮತ್ತು ಶಾಸನವನ್ನು ಹೊಂದಿಸಬಹುದು.
ಸಂವಹನದ ದಿಕ್ಕನ್ನು ಮೂಲದಿಂದ ಗುರಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಮತ್ತು ಮೂಲ ಮತ್ತು ಗುರಿಯನ್ನು ನೋಡ್ ಗುರುತಿಸುವಿಕೆಯಿಂದ ಸೂಚಿಸಲಾಗುತ್ತದೆ.
ಒಂದು ಗುಂಪಿಗೆ ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ನೋಡ್‌ಗಳನ್ನು ಸೇರಿಸಬಹುದು.
Связь также можно указать и от группы, и к группе.

ಈ ಸರಳ ನಿಯಮಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ನಾವು ಈ ಕೆಳಗಿನ ರೇಖಾಚಿತ್ರವನ್ನು ಪಡೆಯುತ್ತೇವೆ. ಕೇವಲ? ಸಾಕಷ್ಟು.

А описывается она следующим js-кодом. Основное здесь — это объект elements. В котором указаны nodes — узлы, edges — связи.

  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>

ಒಂದೆಡೆ, ಅಂತಹ ಯೋಜನೆಯು ಲ್ಯಾಪ್‌ಟಾಪ್‌ನಲ್ಲಿ ಬಹುತೇಕ ಒಂದೆರಡು ಪರದೆಯ ಕೋಡ್ ಆಗಿದೆ, ಮತ್ತೊಂದೆಡೆ, ಲಾ ಜೆಸನ್ ರಚನೆಯು ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಸಾದೃಶ್ಯದ ಮೂಲಕ ತ್ವರಿತವಾಗಿ ತುಂಬಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ನೀವು ನಕಲಿಸಬಹುದು.

ನೋಡ್‌ಗಳಿಂದ ಪ್ರತ್ಯೇಕವಾಗಿ ಸ್ಥಾನಗಳನ್ನು ಏಕೆ ಇರಿಸಲಾಗುತ್ತದೆ?

ಇದು ಹೆಚ್ಚು ಆರಾಮದಾಯಕವಾಗಿದೆ. ಮೊದಲು ನಾವು ನೋಡ್ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೇವೆ. ನಂತರ ನಾವು ಒಂದೆರಡು ಗುಂಪುಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ನೋಡ್ಗಳಲ್ಲಿ ಸೂಚಿಸಬಹುದು. ನಂತರ ನಾವು ಸಂಪರ್ಕಗಳನ್ನು ಗೊತ್ತುಪಡಿಸುತ್ತೇವೆ. ಮತ್ತು ನಂತರ ಮಾತ್ರ, ಅವುಗಳ ನಡುವೆ ಮುಖ್ಯ ವಸ್ತುಗಳು ಮತ್ತು ಸಂಪರ್ಕಗಳು ಇದ್ದಾಗ, ನಾವು ರೇಖಾಚಿತ್ರದಲ್ಲಿ ಈ ವಸ್ತುಗಳ ಸ್ಥಳವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತೇವೆ. ಅಥವಾ ಪ್ರತಿಯಾಗಿ.

А можно без positions?

ಸ್ಥಾನಗಳಿಲ್ಲದೆ ಇದು ಸಾಧ್ಯ. ಆದರೆ ಇದು ಸ್ವಲ್ಪ ಸುಕ್ಕುಗಟ್ಟುತ್ತದೆ; ನೀವು ಈ ಆಯ್ಕೆಯನ್ನು ಉದಾಹರಣೆಗಳಲ್ಲಿ ನೋಡಬಹುದು. ಸೈಟೋಸ್ಕೇಪ್‌ಗಾಗಿ ನೋಡ್‌ಗಳ ಸ್ಥಳಕ್ಕೆ ಅಲ್ಗಾರಿದಮ್ ಇರುವುದು ಇದಕ್ಕೆ ಕಾರಣ. fcose, ಇದು ಗುಂಪುಗಳ ಉಪಸ್ಥಿತಿಯನ್ನು ಸಹ ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಸ್ಥಾನಗಳನ್ನು ಸೂಚಿಸುವುದು ರೇಖಾಚಿತ್ರವನ್ನು ಹೆಚ್ಚು ನಿಯಂತ್ರಿಸುವಂತೆ ಮಾಡುತ್ತದೆ, ಆದರೆ ರೇಖಾಚಿತ್ರದ ಮೊದಲ ಡ್ರಾಫ್ಟ್ನ ಹಂತದಲ್ಲಿ ಸ್ಥಾನಗಳಿಲ್ಲದೆ ಸಾಧ್ಯವಿದೆ.

Также positions можно указывать в стиле Морского боя. Т.е. один узел располагается в a1, а другой в d5. Особенно помогает, что cytoscape формирует объекты на canvas подвижными, т.е. мы можем их подвигать, посмотреть разные варианты расположения, а затем зафиксировать в коде понравившееся расположение элементов.

ಸಾಮಾನ್ಯವಾಗಿ, ಇದು ಅರ್ಥವಾಗುವಂತಹದ್ದಾಗಿದೆ. ನೀವು ಸಹ ಪ್ರಯತ್ನಿಸಬಹುದೇ?

ಸಹಜವಾಗಿ, ತ್ವರಿತವಾಗಿ ಸರ್ಕ್ಯೂಟ್ಗಳನ್ನು ರಚಿಸಲು, ನಾನು ನನ್ನನ್ನು ಚಿಕ್ಕದಾಗಿಸಿದ್ದೇನೆ ಸಂಪಾದಕ, который сам обновляет схему и в браузере хранит последний вариант (в 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. ನಮಗೆ ಅಗತ್ಯವಿರುವ ರೇಖಾಚಿತ್ರಕ್ಕೆ ನಾವು ಕೋಡ್ ಅನ್ನು ಸಂಪಾದಿಸುತ್ತೇವೆ (ಗೂಬೆಯನ್ನು ಚಿತ್ರಿಸುವುದಕ್ಕಿಂತ ಇದು ಸುಲಭ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ :)

ನಲ್ಲಿ ಹೆಚ್ಚಿನ ವಿವರಗಳು ಯೋಜನೆಯ ಪುಟ ಗಿಥಬ್ ಮೇಲೆ.

ಕೊನೆಯಲ್ಲಿ ಏನು?

Своих целей я достиг — сделать добавление схем inline в документацию, формат достаточно простой и понятный. Для суперсхем не подойдет, а для небольших схем, поясняющих структуру связей — очень даже ничего. Всегда можно быстро подправить и что-то с течением времени поменять. Да, и коллеги могут в доке сами что-то подправить, как минимум подписи к объектам без особого обучения ))

ಏನು ಸುಧಾರಿಸಬಹುದು?

Тут вариантов, конечно, масса. Сделать добавление дополнительных иконок (все имеющиеся добавлены inline в скрипт). Подобрать более выразительный набор иконок. Сделать возможность указания стиля линии связей. Добавить фоновое изображение.

ನೀವು ಏನು ಯೋಚಿಸುತ್ತೀರಿ?

ಸಮಸ್ಯೆಗಳಲ್ಲಿ ಅನುಷ್ಠಾನಕ್ಕೆ ನಾನು ಈಗಾಗಲೇ ಹಲವಾರು ಆಲೋಚನೆಗಳನ್ನು ಹೊಂದಿದ್ದೇನೆ, ನೀವು ಕಾಮೆಂಟ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮದನ್ನು ಸೇರಿಸಬಹುದು.

ನನ್ನ ಪರಿಹಾರವು ಕಿರಿದಾದ ಶ್ರೇಣಿಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಖಂಡಿತವಾಗಿಯೂ ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ರೇಖಾಚಿತ್ರಗಳನ್ನು ಸರಳವಾಗಿ ಕೋಡಿಂಗ್ ಮಾಡುವ ಮೂಲಕ ರೇಖಾಚಿತ್ರಗಳನ್ನು ಚಿತ್ರಿಸಲು ನೀವು ಹೆಚ್ಚು ಅನುಕೂಲಕರ ಸಾಧನವನ್ನು ಕಾಣಬಹುದು - ಅವರು ಹೇಳುವಂತೆ 'ನಿಮ್ಮ ರೇಖಾಚಿತ್ರವನ್ನು ಕೋಡ್ ಆಗಿ ನನಗೆ ತೋರಿಸಿ'

ಉತ್ತಮ ಆಯ್ಕೆ
ಉತ್ತಮ ಸೇವೆ (9 типов графиков онлайн-редактор)
Конечно, mermaid.js
ಮತ್ತು ನೀವು ಸೂಪರ್ ವಿವರವಾದ ಮತ್ತು ಸಂಕೀರ್ಣ ರೇಖಾಚಿತ್ರಗಳನ್ನು ಬಯಸಿದರೆ, ನೀವು ಖಂಡಿತವಾಗಿಯೂ ಈ ಯೋಜನೆಯನ್ನು ಮೆಚ್ಚುತ್ತೀರಿ: go.drawthe.net

ಮೂಲ: www.habr.com

ನೆಟ್‌ವರ್ಕ್ ರೇಖಾಚಿತ್ರವನ್ನು ಕೋಡ್‌ನಂತೆ / ನೆಟ್‌ವರ್ಕ್ ರೇಖಾಚಿತ್ರವನ್ನು ಕೋಡ್‌ನಂತೆ

ಕಾಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ Отменить ответ