பிணைய வரைபடம் குறியீடாக / பிணைய வரைபடம் குறியீடாக

கடந்த இரண்டு வருடங்களில் நான் ஆவணப்படுத்துவதில் அதிக ஈடுபாடு கொண்டுள்ளேன். ஒரு குறிப்பிட்ட அமைப்பு எவ்வாறு செயல்படுகிறது என்பதைப் பற்றிய விளக்க உரையை எழுதுவது பொதுவாக மிகவும் எளிமையானது. அனைத்து முக்கிய பொருட்களையும் இந்த பொருட்களுக்கு இடையேயான இணைப்புகளையும் காண்பிக்கும் வரைபடத்தை வரைவது மிகவும் எளிதானது.

ஆனால் இந்த ஆவணங்களை புதுப்பித்த நிலையில் வைத்திருப்பது மிகவும் சிக்கலான அம்சமாகும். உரை நன்றாக இருக்கும், ஆனால் வரைபடங்கள்... ஏனெனில்... அனைத்து ஆவணங்களும் ஆன்லைனில் உள்ளன, அதாவது. html வடிவத்தில், உரையுடன் gif/jpeg/png படங்கள் இருக்கும், இது உண்மையில் வரைபடங்களைக் காட்டுகிறது. மேலும் Visio அல்லது ஆன்லைன் சேவைகள் a la draw.io போன்ற பல்வேறு திட்டங்களில் வரைபடங்கள் வரையப்படுகின்றன. பின்னர் நீங்கள் வரைபடத்தை கிராஃபிக் வடிவத்தில் ஏற்றுமதி செய்து அதை html உடன் இணைக்கவும். இது எளிமை.

பிரச்சனை என்ன?

திட்டங்கள் பொதுவாக எளிமையானவை. இன்னும் துல்லியமாக, மிகவும் சிக்கலானது அல்ல. ஆம், பொருள்களின் எண்ணிக்கை ஒரு டஜன் அல்லது இரண்டு, இணைப்புகளின் எண்ணிக்கை தோராயமாக ஒரே மாதிரியாக இருக்கும். மேலும் கையொப்பங்கள், சில பதவிகள். எளிமையான திட்டங்களை வார்த்தைகளில் விவரிக்கலாம், ஆனால் மிகவும் சிக்கலானவை, அஹம்... (c) "அவர்களுக்கு புரியாது, ஐயா." பல திட்டங்கள் உள்ளன, அவற்றில் அவ்வப்போது மாற்றங்கள் செய்யப்பட வேண்டும், எபிசோடிக் முறையில், அதாவது. தொடர்ந்து, ஏனெனில் அவர்கள் எங்கள் தயாரிப்புகளின் வளர்ச்சியைப் பின்பற்றுகிறார்கள்.

நீங்கள் சேவையின் 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);

நிச்சயமாக, நான் சுற்று வரைபடத்தை நானே கொண்டு வரவில்லை, ஆனால் நூலகத்தைப் பயன்படுத்தினேன் சைட்டோஸ்கேப்.ஜே.எஸ் மிகவும் சக்திவாய்ந்த காட்சிப்படுத்தல் கருவியாகும். எனது தீர்வுக்கான சாத்தியக்கூறுகளின் ஒரு பகுதியை மட்டுமே நான் பயன்படுத்துகிறேன். 

சரி, இது ஒரு எளிய உதாரணம். இது மிகவும் சிக்கலானதாக இருக்க முடியுமா?

ஆமாம் தயவு செய்து. நிலைகளைக் குறிக்க, நாங்கள் நிலைகளைப் பயன்படுத்துகிறோம், குழுக்களைக் குறிக்க, குழுக்களில் உள்ள குழுக்களின் பட்டியலைக் குறிப்பிடுகிறோம், மேலும் உறுப்புகளுக்கு ஒரு குழு பண்பு உள்ளது.

மற்றும் இது குறியீடு:

<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, இது குழுக்களின் இருப்பையும் கணக்கில் எடுத்துக்கொள்கிறது. நிலைகளைக் குறிப்பிடுவது வரைபடத்தை மிகவும் கட்டுப்படுத்தக்கூடியதாக ஆக்குகிறது, ஆனால் வரைபடத்தின் முதல் வரைவின் கட்டத்தில் அது நிலைகள் இல்லாமல் சாத்தியமாகும்.

போர்க்கப்பல் பாணியிலும் நிலைகளைக் குறிப்பிடலாம். அந்த. ஒரு முனை 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