แผนภาพเครือข่ายเป็นรหัส / แผนภาพเครือข่ายเป็นรหัส

ในช่วงสองสามปีที่ผ่านมา ฉันเกี่ยวข้องกับงานเอกสารมากขึ้น โดยทั่วไปการเขียนข้อความอธิบายเกี่ยวกับวิธีการทำงานของระบบนั้นค่อนข้างง่าย การวาดไดอะแกรมที่จะแสดงวัตถุหลักทั้งหมดและการเชื่อมต่อระหว่างวัตถุเหล่านี้ก็ค่อนข้างง่ายเช่นกัน

แต่ด้านที่เป็นปัญหาที่สุดคือการรักษาเอกสารนี้ให้ทันสมัยอยู่เสมอ และข้อความคงจะดี แต่ไดอะแกรม... เพราะ... เอกสารทั้งหมดออนไลน์อยู่เช่น ในรูปแบบ html ข้อความจะมาพร้อมกับรูปภาพ gif/jpeg/png ซึ่งแสดงไดอะแกรมจริงๆ และไดอะแกรมถูกวาดในโปรแกรมต่าง ๆ เช่น Visio หรือบริการออนไลน์ a la Draw.io จากนั้นคุณส่งออกไดอะแกรมเป็นรูปแบบกราฟิกและแนบไปกับ html มันง่ายมาก

ปัญหาคืออะไร?

แผนการมักจะเรียบง่าย แม่นยำยิ่งขึ้นไม่ซับซ้อนมาก ใช่ จำนวนวัตถุคือหนึ่งหรือสองชิ้น จำนวนการเชื่อมต่อจะเท่ากันโดยประมาณ พร้อมลายเซ็นและการกำหนดบางอย่าง แผนการง่าย ๆ สามารถอธิบายเป็นคำพูดได้ แต่ซับซ้อนเกินไป เอิ่ม... (ค) “พวกเขาจะไม่เข้าใจครับ” มีหลายแผนการที่ต้องทำการเปลี่ยนแปลงเป็นระยะ ๆ เป็นตอน ๆ เช่น อย่างต่อเนื่องเพราะว่า พวกเขาติดตามการพัฒนาผลิตภัณฑ์ของเรา

คุณสามารถฝัง html ของบริการได้ คุณลองแล้วหรือยัง?

แน่นอน. ตัวอย่างเช่น ฉันชอบกราฟิกจาก gliffy.com แต่หากต้องการเปลี่ยนแปลง คุณต้องไปที่บริการของบุคคลที่สามและแก้ไขที่นั่น และการมอบหมายการแก้ไขให้เพื่อนร่วมงานทำได้ยากกว่า

จะทำอย่างไร?

เมื่อเร็ว ๆ นี้ฉันเจอพื้นที่เก็บข้อมูลบน Github ในคำแนะนำ github.com/RaoulMeyer/diagram-as-code. ไดอะแกรมเป็นโค้ด เหล่านั้น. เราอธิบายวงจรที่เราต้องการใน js เราเขียน js นี้โดยตรงใน html เดียวกันกับข้อความเอกสารอื่น ๆ

อย่างไรก็ตาม ฉันเขียนเอกสารที่ไม่ได้ใช้ในรูปแบบ html ทั้งหมด โดยทั่วไป เอกสารประกอบคือชุดของไฟล์ที่มีข้อความมาร์กดาวน์ ซึ่งจากนั้นจะถูกแปลงเป็นไซต์เอกสารประกอบเต็มรูปแบบโดยกลไกบางอย่าง เช่น wintersmith หรือระบบวิกิ

สะดวกมาก: เราเขียนข้อความแล้วแท็กสคริปต์จะเปิดขึ้นและอธิบายรหัส JS ของโครงร่างไว้ในนั้น

เกิดอะไรขึ้นอีกครั้ง?

ฉันชอบพื้นที่เก็บข้อมูลนี้ แต่นี่ไม่ใช่ตัวอย่างเดียวที่วาดไดอะแกรมโดยใช้โค้ดหรือการแสดงข้อความ (ในตอนท้ายของบทความจะมีลิงก์ไปยังโครงการและบทความที่ฉัน Google ในแผนภาพหัวข้อเป็นโค้ด)

และฉันไม่ใช่คนเดียวที่แก้ไขเอกสาร บางครั้งเพื่อนร่วมงานก็มีส่วนร่วม เช่น แก้ไขคำ เปลี่ยนคำอธิบาย แทรกรูปภาพใหม่ 

ดังนั้นฉันจึงอยากเห็นไดอะแกรมในรูปแบบข้อความที่อ่านเข้าใจได้ซึ่งไม่ต้องอาศัยการเรียนรู้ที่ยาวนาน และในบางสถานที่ คุณยังสามารถคัดลอก-วางเพื่อเร่งการเพิ่มวงจรใหม่ได้อีกด้วย 

และเพื่อนร่วมงานอีกคนตั้งข้อสังเกตว่าโค้ดนั้นแน่นอนว่าดี แต่ถ้าคุณใช้โครงสร้าง ทุกอย่างจะเข้มงวดและแสดงออกได้มาก

ดังนั้นฉันจึงพยายามจินตนาการถึงไดอะแกรมว่าเป็นชุดของอาร์เรย์เล็กๆ หลายชุดที่อธิบายโหนด การเชื่อมต่อ กลุ่มของโหนด รวมถึงตำแหน่งของโหนด ในความเห็นของฉันมันกลับกลายเป็นว่าค่อนข้างสะดวกแม้ว่าแน่นอนว่ารสชาติและสี...

นี่เป็นแผนภูมิในอาร์เรย์อย่างไร

• แต่ละโหนดอธิบายโดยตัวระบุที่ระบุโหนดโดยไม่ซ้ำกัน
• คุณยังสามารถเพิ่มไอคอนลงในโหนดและเพิ่มคำจารึกได้
• คุณสามารถระบุความสัมพันธ์ระหว่างสองโหนดได้
• สำหรับการสื่อสารบนไดอะแกรมคุณสามารถกำหนดสีและคำจารึกได้
• ทิศทางของการสื่อสารถูกกำหนดจากต้นทางไปยังเป้าหมาย และแหล่งที่มาและเป้าหมายจะถูกระบุโดยตัวระบุโหนด
• สามารถเพิ่มโหนดอย่างน้อยหนึ่งรายการในกลุ่มได้
• ความสัมพันธ์สามารถระบุได้ทั้งจากกลุ่มและไปยังกลุ่ม

เมื่อใช้กฎง่ายๆ เหล่านี้ เราจะได้ไดอะแกรมต่อไปนี้ แค่? ค่อนข้าง.

และอธิบายด้วยโค้ด 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 ช่วยให้คุณสามารถกรอกข้อมูลทั้งหมดโดยการเปรียบเทียบได้อย่างรวดเร็วและคุณสามารถคัดลอกวางได้

เหตุใดตำแหน่งจึงแยกจากโหนด?

มันสะดวกสบายมากขึ้น ก่อนอื่นเราระบุโหนด จากนั้นเราสามารถระบุกลุ่มสองสามกลุ่มและระบุกลุ่มเหล่านั้นในโหนด จากนั้นเราจะกำหนดการเชื่อมต่อ และเมื่อวัตถุหลักและการเชื่อมต่อระหว่างวัตถุเหล่านั้นอยู่ที่นั่น เราก็จะระบุตำแหน่งของวัตถุเหล่านี้บนแผนภาพ หรือในทางกลับกัน

เป็นไปได้ไหมที่ไม่มีตำแหน่ง?

เป็นไปได้โดยไม่มีตำแหน่ง แต่จะยับเล็กน้อยคุณสามารถดูตัวเลือกนี้ได้ในตัวอย่าง นี่เป็นเพราะความจริงที่ว่ามีอัลกอริทึมสำหรับตำแหน่งของโหนดสำหรับไซโตสเคป เอฟซีคอสซึ่งคำนึงถึงการมีอยู่ของกลุ่มด้วย การระบุตำแหน่งทำให้ไดอะแกรมสามารถควบคุมได้มากขึ้น แต่ในขั้นตอนของการร่างแรกของไดอะแกรม สามารถทำได้โดยไม่มีตำแหน่ง

ตำแหน่งสามารถระบุได้ในรูปแบบเรือรบ เหล่านั้น. โหนดหนึ่งอยู่ใน a1 และอีกโหนดอยู่ใน d5 โดยเฉพาะอย่างยิ่งช่วยให้ไซโตสเคปทำให้วัตถุบนผืนผ้าใบสามารถเคลื่อนย้ายได้ เช่น เราสามารถย้ายมันไปรอบๆ ดูตัวเลือกเค้าโครงต่างๆ แล้วแก้ไขการจัดเรียงองค์ประกอบที่เราชอบในโค้ด

โดยทั่วไปก็เข้าใจได้ คุณยังสามารถลอง?
 
แน่นอนว่าเพื่อสร้างวงจรอย่างรวดเร็ว ฉันจึงสร้างตัวเองให้เล็กลง บรรณาธิการซึ่งอัพเดตสคีมาและจัดเก็บเวอร์ชันล่าสุดในเบราว์เซอร์ (ใน 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. เราแก้ไขโค้ดเป็นไดอะแกรมที่เราต้องการ (ฉันคิดว่าง่ายกว่าการวาดนกฮูก :)

รายละเอียดเพิ่มเติมได้ที่ หน้าโครงการ บน GitHub

ผลหรือไม่

ฉันบรรลุเป้าหมาย - เพื่อเพิ่มไดอะแกรมอินไลน์ลงในเอกสารประกอบ รูปแบบค่อนข้างง่ายและเข้าใจได้ ไม่เหมาะกับวงจรซุปเปอร์ แต่สำหรับวงจรขนาดเล็กที่อธิบายโครงสร้างการเชื่อมต่อก็ไม่เป็นไร คุณสามารถปรับแต่งและเปลี่ยนแปลงบางสิ่งบางอย่างได้ตลอดเวลา ใช่ และเพื่อนร่วมงานสามารถแก้ไขบางสิ่งบางอย่างใน Dock ได้ด้วยตนเอง อย่างน้อยก็คำบรรยายสำหรับวัตถุ โดยไม่ต้องมีการฝึกอบรมพิเศษ))

สามารถปรับปรุงอะไรได้บ้าง?

แน่นอนว่ามีตัวเลือกมากมายที่นี่ เพิ่มไอคอนเพิ่มเติม (ไอคอนที่มีอยู่ทั้งหมดจะถูกเพิ่มแบบอินไลน์ในสคริปต์) เลือกชุดไอคอนที่แสดงอารมณ์มากขึ้น ทำให้สามารถระบุรูปแบบของสายเชื่อมต่อได้ เพิ่มภาพพื้นหลัง

คุณคิดอย่างไร?
 
ฉันมีแนวคิดหลายประการสำหรับการนำไปใช้ในประเด็นต่างๆ คุณสามารถเพิ่มแนวคิดของคุณในความคิดเห็นได้

• ที่เก็บ
• ตัวอย่าง
• บรรณาธิการออนไลน์

วิธีแก้ปัญหาของฉันใช้ได้กับปัญหาช่วงแคบๆ อย่างแน่นอน และบางทีคุณจะพบเครื่องมือที่สะดวกกว่าในการวาดไดอะแกรมโดยเพียงแค่เขียนโค้ด ดังที่พวกเขาพูดว่า 'แสดงไดอะแกรมของคุณเป็นโค้ด'

1. การเลือกที่ดี
2. บริการสุดยอด (โปรแกรมแก้ไขแผนภูมิออนไลน์ 9 ประเภท)
3. แน่นอน นางเงือก.js
4. และถ้าคุณชอบไดอะแกรมที่มีรายละเอียดสูงและซับซ้อน คุณจะต้องชื่นชมโปรเจ็กต์นี้อย่างแน่นอน: go.drawthe.net

ที่มา: will.com