కోడ్‌గా నెట్‌వర్క్ రేఖాచిత్రం / కోడ్‌గా నెట్‌వర్క్ రేఖాచిత్రం

గత రెండేళ్ళలో నేను డాక్యుమెంటేషన్‌లో ఎక్కువగా నిమగ్నమయ్యాను. నిర్దిష్ట సిస్టమ్ ఎలా పనిచేస్తుందనే దాని గురించి వివరణాత్మక వచనాన్ని వ్రాయడం సాధారణంగా చాలా సులభం. అన్ని కీలక వస్తువులు మరియు ఈ వస్తువుల మధ్య కనెక్షన్‌లను ప్రదర్శించే రేఖాచిత్రాన్ని గీయడం కూడా చాలా సులభం.

కానీ ఈ డాక్యుమెంటేషన్‌ను తాజాగా ఉంచడం అత్యంత సమస్యాత్మకమైన అంశం. మరియు టెక్స్ట్ బాగానే ఉంటుంది, కానీ రేఖాచిత్రాలు... ఎందుకంటే... అన్ని డాక్యుమెంటేషన్ ఆన్‌లైన్‌లో ఉంది, అనగా. html ఆకృతిలో, ఆపై టెక్స్ట్ gif/jpeg/png చిత్రాలతో పాటు ఉంటుంది, ఇది వాస్తవానికి రేఖాచిత్రాలను చూపుతుంది. మరియు విసియో లేదా ఆన్‌లైన్ సర్వీసెస్ 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>

ఒక వైపు, అటువంటి పథకం ల్యాప్‌టాప్‌లో దాదాపు రెండు స్క్రీన్‌ల కోడ్‌గా ఉంటుంది, మరోవైపు, లా 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