የአውታረ መረብ ንድፍ እንደ ኮድ / የአውታረ መረብ ንድፍ እንደ ኮድ

ባለፉት ሁለት ዓመታት ውስጥ በሰነዶች ውስጥ የበለጠ ተሳትፎ ችያለሁ። አንድ የተወሰነ ስርዓት እንዴት እንደሚሰራ የማብራሪያ ጽሑፍ መጻፍ በአጠቃላይ በጣም ቀላል ነው። ሁሉንም ቁልፍ ነገሮች እና በእነዚህ ነገሮች መካከል ያለውን ግንኙነት የሚያሳይ ንድፍ መሳል እንዲሁ በጣም ቀላል ነው።

ነገር ግን በጣም አስቸጋሪው ገጽታ ይህንን ሰነድ ወቅታዊ ማድረግ ነው. እና ጽሑፉ ጥሩ ይሆናል, ግን ስዕሎቹ ... ምክንያቱም ... ሁሉም ሰነዶች በመስመር ላይ ናቸው, ማለትም. በኤችቲኤምኤል ቅርጸት ፣ ከዚያ ጽሑፉ በ gif/jpeg/png ሥዕሎች የታጀበ ሲሆን ይህም ሥዕሎቹን በትክክል ያሳያል። እና ስዕላዊ መግለጫዎች በተለያዩ ፕሮግራሞች እንደ Visio ወይም የመስመር ላይ አገልግሎቶች a la draw.io ይሳሉ። ከዚያ ዲያግራሙን ወደ ግራፊክ ቅርጸት ወደ ውጭ መላክ እና ከኤችቲኤምኤል ጋር ያያይዙታል። ቀላል ነው።

ችግሩ ምንድን ነው?

መርሃግብሮቹ ብዙውን ጊዜ ቀላል ናቸው. ይበልጥ በትክክል, በጣም የተወሳሰበ አይደለም. አዎ, የነገሮች ብዛት ደርዘን ወይም ሁለት ነው, የግንኙነቶች ብዛት በግምት ተመሳሳይ ነው. የፕላስ ፊርማዎች፣ አንዳንድ ስያሜዎች። ቀላል እቅዶች በቃላት ሊገለጹ ይችላሉ, ግን በጣም ውስብስብ ናቸው, አሂም ... (ሐ) "አይረዱም, ጌታ." ብዙ እቅዶች አሉ, በእነሱ ላይ በየጊዜው ለውጦች መደረግ አለባቸው, በተከታታይ, ማለትም. ያለማቋረጥ, ምክንያቱም እነሱ የእኛን ምርቶች እድገት ይከተላሉ.

የአገልግሎቱን ኤችቲኤምኤል መክተት ይችላሉ። ሞክረዋል?

አወ እርግጥ ነው. ለምሳሌ፣ የ gliffy.com ግራፊክስን እወዳለሁ። ግን ለውጦችን ለማድረግ ወደ የሶስተኛ ወገን አገልግሎት መሄድ እና እዚያ ማረም ያስፈልግዎታል። እና እርማቶችን ለባልደረባ ማስተላለፍ የበለጠ ከባድ ነው።

ምን ማድረግ አለብኝ?

በቅርብ ጊዜ ምክሮች ውስጥ Github ላይ አንድ ማከማቻ አገኘሁ github.com/RaoulMeyer/diagram-as-code. ዲያግራም እንደ ኮድ። እነዚያ። በ js ውስጥ የሚያስፈልገንን ወረዳ እንገልፃለን. ይህንን 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);

እርግጥ ነው, እኔ ራሴ የወረዳውን ስዕል አላመጣሁም, ነገር ግን ቤተ መፃህፍት ተጠቀምኩ ሳይቶስካፕ.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, ይህም ደግሞ የቡድኖች መኖራቸውን ግምት ውስጥ ያስገባል. አቀማመጦችን መግለጽ ዲያግራሙን የበለጠ ቁጥጥር ያደርገዋል, ነገር ግን በስዕሉ የመጀመሪያ ረቂቅ ደረጃ ላይ ያለ አቀማመጥ ይቻላል.

የስራ መደቦች በBattleship style ውስጥም ሊገለጹ ይችላሉ። እነዚያ። አንድ መስቀለኛ መንገድ በ 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. እና እጅግ በጣም ዝርዝር እና ውስብስብ ንድፎችን ከወደዱ ታዲያ ይህን ፕሮጀክት በእርግጠኝነት ያደንቁታል- ሂድ.መሳል.መረብ

ምንጭ: hab.com