કોડ તરીકે નેટવર્ક ડાયાગ્રામ / કોડ તરીકે નેટવર્ક ડાયાગ્રામ

છેલ્લા કેટલાક વર્ષોમાં હું દસ્તાવેજીકરણમાં વધુ સામેલ થયો છું. કોઈ ચોક્કસ સિસ્ટમ કેવી રીતે કાર્ય કરે છે તે વિશે સમજૂતીત્મક ટેક્સ્ટ લખવું સામાન્ય રીતે એકદમ સરળ છે. એક આકૃતિ દોરવી જે તમામ કી ઓબ્જેક્ટો અને આ ઓબ્જેક્ટો વચ્ચેના જોડાણો દર્શાવે છે તે પણ એકદમ સરળ છે.

પરંતુ સૌથી સમસ્યારૂપ પાસું આ દસ્તાવેજીકરણને અદ્યતન રાખવું છે. અને લખાણ સારું હશે, પરંતુ આકૃતિઓ... કારણ કે... તમામ દસ્તાવેજો ઓનલાઈન છે, એટલે કે. html ફોર્મેટમાં, પછી ટેક્સ્ટની સાથે gif/jpeg/png ચિત્રો હોય છે, જે વાસ્તવમાં આકૃતિઓ દર્શાવે છે. અને આકૃતિઓ વિઝિયો અથવા ઓનલાઈન સેવાઓ a la draw.io જેવા વિવિધ કાર્યક્રમોમાં દોરવામાં આવે છે. પછી તમે ડાયાગ્રામને ગ્રાફિક ફોર્મેટમાં નિકાસ કરો અને તેને html સાથે જોડો. તે સરળ છે.

સમસ્યા શું છે?

યોજનાઓ સામાન્ય રીતે સરળ હોય છે. વધુ સ્પષ્ટ રીતે, ખૂબ જટિલ નથી. હા, ઑબ્જેક્ટ્સની સંખ્યા એક ડઝન અથવા બે છે, જોડાણોની સંખ્યા લગભગ સમાન છે. વત્તા સહીઓ, કેટલાક હોદ્દો. સરળ યોજનાઓ શબ્દોમાં વર્ણવી શકાય છે, પરંતુ ખૂબ જટિલ છે, અહેમ... (c) "તેઓ સમજી શકશે નહીં, સાહેબ." ત્યાં ઘણી યોજનાઓ છે, તેમાં સમયાંતરે ફેરફારો કરવાની જરૂર છે, એપિસોડિકલી, એટલે કે. સતત, કારણ કે તેઓ અમારા ઉત્પાદનોના વિકાસને અનુસરે છે.

તમે સેવાના html ને એમ્બેડ કરી શકો છો. શું તમે તેનો પ્રયાસ કર્યો છે?

હા પાક્કુ. ઉદાહરણ તરીકે, મને gliffy.com ના ગ્રાફિક્સ ગમે છે. પરંતુ ફેરફારો કરવા માટે, તમારે તૃતીય-પક્ષ સેવા પર જવું પડશે અને ત્યાં ફેરફાર કરવો પડશે. અને સાથીદારને કરેક્શન સોંપવું વધુ મુશ્કેલ છે.

મારે શું કરવું જોઈએ?

તાજેતરમાં હું ભલામણોમાં ગીથબ પર એક રીપોઝીટરીમાં આવ્યો github.com/RaoulMeyer/diagram-as-code. કોડ તરીકે ડાયાગ્રામ. તે. આપણે js માં જરૂરી સર્કિટનું વર્ણન કરીએ છીએ. અમે આ js સીધા જ html માં લખીએ છીએ જ્યાં અન્ય દસ્તાવેજીકરણ ટેક્સ્ટ છે.

માર્ગ દ્વારા, હું દસ્તાવેજીકરણ સંપૂર્ણપણે html માં લખું છું. સામાન્ય રીતે, દસ્તાવેજીકરણ એ માર્કડાઉન ટેક્સ્ટ સાથેની ફાઇલોનો સમૂહ છે, જે પછી કેટલાક એન્જિન દ્વારા સંપૂર્ણ દસ્તાવેજીકરણ સાઇટમાં રૂપાંતરિત થાય છે, ઉદાહરણ તરીકે વિન્ટરસ્મિથ. અથવા વિકિ સિસ્ટમ.

તે ખૂબ જ અનુકૂળ બહાર આવ્યું છે: અમે ટેક્સ્ટ લખ્યો છે, પછી સ્ક્રિપ્ટ ટેગ ખુલે છે અને તેમાં યોજનાનો 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>

એક તરફ, આવી યોજના એ લેપટોપ પર કોડની લગભગ થોડી સ્ક્રીનો છે, બીજી તરફ, લા જેસન સ્ટ્રક્ચર તમને સમાનતા દ્વારા તમામ ડેટાને ઝડપથી ભરવાની મંજૂરી આપે છે અને તમે કૉપિ-પેસ્ટ કરી શકો છો.

શા માટે ગાંઠોથી અલગ સ્થાનો મૂકવામાં આવે છે?

તે વધુ આરામદાયક છે. પ્રથમ આપણે નોડ્સનો ઉલ્લેખ કરીએ છીએ. પછી આપણે કેટલાક જૂથોનો ઉલ્લેખ કરી શકીએ છીએ અને તેમને નોડ્સમાં સૂચવી શકીએ છીએ. પછી અમે જોડાણોને નિયુક્ત કરીએ છીએ. અને માત્ર ત્યારે જ, જ્યારે મુખ્ય વસ્તુઓ અને તેમની વચ્ચેના જોડાણો હોય, ત્યારે આપણે ડાયાગ્રામ પર આ વસ્તુઓનું સ્થાન લઈએ છીએ. અથવા ઊલટું.

શું હોદ્દા વિના શક્ય છે?

હોદ્દા વિના તે શક્ય છે. પરંતુ તે થોડું ચોળાયેલું હશે; તમે ઉદાહરણોમાં આ વિકલ્પ જોઈ શકો છો. આ એ હકીકતને કારણે છે કે સાયટોસ્કેપ માટે નોડ્સના સ્થાન માટે એક અલ્ગોરિધમ છે 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