ਕੋਡ ਦੇ ਤੌਰ 'ਤੇ ਨੈੱਟਵਰਕ ਡਾਇਗ੍ਰਾਮ / ਕੋਡ ਦੇ ਤੌਰ 'ਤੇ ਨੈੱਟਵਰਕ ਡਾਇਗ੍ਰਾਮ

ਪਿਛਲੇ ਕੁਝ ਸਾਲਾਂ ਵਿੱਚ ਮੈਂ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਵਧੇਰੇ ਸ਼ਾਮਲ ਹੋ ਗਿਆ ਹਾਂ। ਇੱਕ ਖਾਸ ਸਿਸਟਮ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਸ ਬਾਰੇ ਇੱਕ ਵਿਆਖਿਆਤਮਕ ਟੈਕਸਟ ਲਿਖਣਾ ਆਮ ਤੌਰ 'ਤੇ ਕਾਫ਼ੀ ਸਰਲ ਹੁੰਦਾ ਹੈ। ਇੱਕ ਚਿੱਤਰ ਬਣਾਉਣਾ ਜੋ ਸਾਰੀਆਂ ਮੁੱਖ ਵਸਤੂਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗਾ ਅਤੇ ਇਹਨਾਂ ਵਸਤੂਆਂ ਵਿਚਕਾਰ ਕਨੈਕਸ਼ਨ ਵੀ ਕਾਫ਼ੀ ਆਸਾਨ ਹੈ।

ਪਰ ਸਭ ਤੋਂ ਮੁਸ਼ਕਲ ਪਹਿਲੂ ਇਸ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਪ ਟੂ ਡੇਟ ਰੱਖਣਾ ਹੈ। ਅਤੇ ਟੈਕਸਟ ਵਧੀਆ ਹੋਵੇਗਾ, ਪਰ ਚਿੱਤਰ... ਕਿਉਂਕਿ... ਸਾਰੇ ਦਸਤਾਵੇਜ਼ ਔਨਲਾਈਨ ਹਨ, ਜਿਵੇਂ ਕਿ html ਫਾਰਮੈਟ ਵਿੱਚ, ਫਿਰ ਟੈਕਸਟ ਦੇ ਨਾਲ gif/jpeg/png ਤਸਵੀਰਾਂ ਹੁੰਦੀਆਂ ਹਨ, ਜੋ ਅਸਲ ਵਿੱਚ ਚਿੱਤਰ ਦਿਖਾਉਂਦੀਆਂ ਹਨ। ਅਤੇ ਡਾਇਗ੍ਰਾਮ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗਰਾਮਾਂ ਜਿਵੇਂ ਕਿ Visio ਜਾਂ ਔਨਲਾਈਨ ਸੇਵਾਵਾਂ a la draw.io ਵਿੱਚ ਬਣਾਏ ਜਾਂਦੇ ਹਨ। ਫਿਰ ਤੁਸੀਂ ਚਿੱਤਰ ਨੂੰ ਗ੍ਰਾਫਿਕ ਫਾਰਮੈਟ ਵਿੱਚ ਨਿਰਯਾਤ ਕਰਦੇ ਹੋ ਅਤੇ ਇਸਨੂੰ html ਨਾਲ ਜੋੜਦੇ ਹੋ। ਇਹ ਸਧਾਰਨ ਹੈ.

ਸਮੱਸਿਆ ਕੀ ਹੈ?

ਸਕੀਮਾਂ ਆਮ ਤੌਰ 'ਤੇ ਸਧਾਰਨ ਹੁੰਦੀਆਂ ਹਨ। ਵਧੇਰੇ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ, ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਨਹੀਂ. ਹਾਂ, ਵਸਤੂਆਂ ਦੀ ਗਿਣਤੀ ਇੱਕ ਦਰਜਨ ਜਾਂ ਦੋ ਹੈ, ਕੁਨੈਕਸ਼ਨਾਂ ਦੀ ਗਿਣਤੀ ਲਗਭਗ ਇੱਕੋ ਜਿਹੀ ਹੈ। ਪਲੱਸ ਦਸਤਖਤ, ਕੁਝ ਅਹੁਦਾ। ਸਧਾਰਨ ਸਕੀਮਾਂ ਨੂੰ ਸ਼ਬਦਾਂ ਵਿੱਚ ਵਰਣਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਬਹੁਤ ਗੁੰਝਲਦਾਰ, ਅਹਿਮ... (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>

ਇੱਕ ਪਾਸੇ, ਅਜਿਹੀ ਸਕੀਮ ਇੱਕ ਲੈਪਟਾਪ 'ਤੇ ਕੋਡ ਦੀਆਂ ਲਗਭਗ ਦੋ ਸਕਰੀਨਾਂ ਹੈ, ਦੂਜੇ ਪਾਸੇ, 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. ਅਸੀਂ ਕੋਡ ਨੂੰ ਉਸ ਚਿੱਤਰ ਵਿੱਚ ਸੰਪਾਦਿਤ ਕਰਦੇ ਹਾਂ ਜਿਸਦੀ ਸਾਨੂੰ ਲੋੜ ਹੈ (ਮੇਰੇ ਖਿਆਲ ਵਿੱਚ ਇਹ ਉੱਲੂ ਬਣਾਉਣ ਨਾਲੋਂ ਸੌਖਾ ਹੈ :)

'ਤੇ ਹੋਰ ਵੇਰਵੇ ਪ੍ਰੋਜੈਕਟ ਪੰਨਾ github 'ਤੇ.

ਅੰਤ ਵਿੱਚ ਕੀ?

ਮੈਂ ਆਪਣੇ ਟੀਚਿਆਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕੀਤਾ - ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਇਨਲਾਈਨ ਡਾਇਗ੍ਰਾਮ ਜੋੜਨ ਲਈ, ਫਾਰਮੈਟ ਕਾਫ਼ੀ ਸਧਾਰਨ ਅਤੇ ਸਮਝਣ ਯੋਗ ਹੈ। ਇਹ ਸੁਪਰ ਸਰਕਟਾਂ ਲਈ ਢੁਕਵਾਂ ਨਹੀਂ ਹੈ, ਪਰ ਛੋਟੇ ਸਰਕਟਾਂ ਲਈ ਜੋ ਕੁਨੈਕਸ਼ਨਾਂ ਦੀ ਬਣਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰਦੇ ਹਨ, ਇਹ ਬਿਲਕੁਲ ਠੀਕ ਹੈ। ਤੁਸੀਂ ਸਮੇਂ ਦੇ ਨਾਲ ਹਮੇਸ਼ਾ ਤੇਜ਼ੀ ਨਾਲ ਸੁਧਾਰ ਅਤੇ ਕੁਝ ਬਦਲ ਸਕਦੇ ਹੋ। ਹਾਂ, ਅਤੇ ਸਹਿਕਰਮੀ ਆਪਣੇ ਆਪ ਨੂੰ ਡੌਕ ਵਿੱਚ ਕੁਝ ਠੀਕ ਕਰ ਸਕਦੇ ਹਨ, ਘੱਟੋ ਘੱਟ ਵਸਤੂਆਂ ਲਈ ਸੁਰਖੀਆਂ, ਬਿਨਾਂ ਵਿਸ਼ੇਸ਼ ਸਿਖਲਾਈ))

ਕੀ ਸੁਧਾਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ?

ਬੇਸ਼ੱਕ, ਇੱਥੇ ਬਹੁਤ ਸਾਰੇ ਵਿਕਲਪ ਹਨ. ਵਾਧੂ ਆਈਕਨ ਸ਼ਾਮਲ ਕਰੋ (ਸਾਰੇ ਮੌਜੂਦਾ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇਨਲਾਈਨ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ)। ਆਈਕਾਨਾਂ ਦਾ ਵਧੇਰੇ ਭਾਵਪੂਰਤ ਸੈੱਟ ਚੁਣੋ। ਕੁਨੈਕਸ਼ਨ ਲਾਈਨ ਦੀ ਸ਼ੈਲੀ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨਾ ਸੰਭਵ ਬਣਾਓ। ਇੱਕ ਪਿਛੋਕੜ ਚਿੱਤਰ ਸ਼ਾਮਲ ਕਰੋ।

ਤੁਹਾਨੂੰ ਕੀ ਲੱਗਦਾ ਹੈ?
 
ਮੇਰੇ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਮੁੱਦਿਆਂ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਲਈ ਕਈ ਵਿਚਾਰ ਹਨ, ਤੁਸੀਂ ਟਿੱਪਣੀਆਂ ਵਿੱਚ ਵੀ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।

• ਰਿਪੋਜ਼ਟਰੀ
• ਮਿਸਾਲ
• ਔਨਲਾਈਨ ਸੰਪਾਦਕ

ਮੇਰਾ ਹੱਲ ਨਿਸ਼ਚਤ ਤੌਰ 'ਤੇ ਸਮੱਸਿਆਵਾਂ ਦੀ ਇੱਕ ਤੰਗ ਸੀਮਾ ਵਿੱਚ ਲਾਗੂ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਸ਼ਾਇਦ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਕੋਡਿੰਗ ਕਰਕੇ ਚਿੱਤਰ ਬਣਾਉਣ ਲਈ ਇੱਕ ਵਧੇਰੇ ਸੁਵਿਧਾਜਨਕ ਟੂਲ ਲੱਭੋਗੇ - ਜਿਵੇਂ ਕਿ ਉਹ ਕਹਿੰਦੇ ਹਨ 'ਮੈਨੂੰ ਆਪਣਾ ਚਿੱਤਰ ਕੋਡ ਦੇ ਰੂਪ ਵਿੱਚ ਦਿਖਾਓ'

1. ਵਧੀਆ ਚੋਣ
2. ਮਹਾਨ ਸੇਵਾ (9 ਕਿਸਮ ਦੇ ਚਾਰਟ ਔਨਲਾਈਨ ਸੰਪਾਦਕ)
3. ਬੇਸ਼ੱਕ, mermaid.js
4. ਅਤੇ ਜੇ ਤੁਸੀਂ ਸੁਪਰ ਵਿਸਤ੍ਰਿਤ ਅਤੇ ਗੁੰਝਲਦਾਰ ਚਿੱਤਰਾਂ ਨੂੰ ਪਸੰਦ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਯਕੀਨੀ ਤੌਰ 'ਤੇ ਇਸ ਪ੍ਰੋਜੈਕਟ ਦੀ ਪ੍ਰਸ਼ੰਸਾ ਕਰੋਗੇ: go.drawthe.net

ਸਰੋਤ: www.habr.com