ืืื ืื ืืขืฆืืข ืคึผืึธืจ ืคืื ืืึธืจื ืืื ืืื ืืขืจ ืื ืืืึทืืืื ืืื ืืึทืงืืืืขื ืืืืฉืึทื. ืฉืจืืืื ืึทื ืืงืกืคึผืืึทื ืึทืืึธืจื ืืขืงืกื ืืืขืื ืืื ืึท ืืึทืืื ืืขืจ ืกืืกืืขื ืึทืจืืขื ืืื ืืืื ืืึทื ืฅ ืคึผืฉืื. ืฆืืืืขื ืื ื ืึท ืืืึทืืจืึทืืข ืืืึธืก ืืืขื ืืืืึทืื ืึทืืข ืื ืฉืืืกื ืึทืืืืฉืขืงืฅ ืืื ืื ืงืึทื ืขืงืฉืึทื ื ืฆืืืืฉื ืื ืึทืืืืฉืขืงืฅ ืืื ืืืื ืืึทื ืฅ ืืจืื ื.
ืืืขืจ ืื ืืขืจืกื ืคึผืจืึธืืืขืืึทืืืง ืึทืกืคึผืขืงื ืืื ืืขืืขืกืงืขื ืืขื ืืึทืงืืืืขื ืืืืฉืึทื. ืืื ืืขืจ ืืขืงืกื ืืืึธืื ืืืื ืคืืึทื, ืึธืืขืจ ืื ืืืืึทืืจืึทืื ... ืืืืึทื ... ืึทืืข ืืึทืงืืืืขื ืืืืฉืึทื ืืื ืึธื ืืืื, ื.ื. ืืื HTML ืคึฟืึธืจืืึทื, ืืขืจ ืืขืงืกื ืืื ืืืืืืื ืืืจื gif/jpeg/png ืืืืืขืจ, ืืืึธืก ืึทืงืืฉืึทืืืึทืื ืืืืึทืื ืื ืืืืึทืืจืึทืื. ืืื ืืืืึทืืจืึทืื ืืขื ืขื ืฆืืขื ืืื ืคืึทืจืฉืืื ืืืืื ืึทืืึท ืืื Visio ืึธืืขืจ ืึธื ืืืื ืืึทืืื ืื ืืก a la draw.io. ืืขืจื ืึธื ืืืจ ืึทืจืืืกืคืืจื ืื ืืืึทืืจืึทืืข ืืื ืืจืึทืคืืง ืคึฟืึธืจืืึทื ืืื ืฆืืืฉืขืคึผืขื ืขืก ืฆื HTML. ืขืก ืืื ืคึผืฉืื.
ืืืึธืก ืืื ืื ืคึผืจืึธืืืขื?
ืื ืกืงืืื ืืขื ืขื ืืืืฉืึทืืืึทืื ืคึผืฉืื. ืืขืจ ืืขื ืื, ื ืืฉื ืืืืขืจ ืงืึธืืคึผืืืฆืืจื. ืืึธ, ืื ื ืืืขืจ ืคืื ืึทืืืืฉืขืงืฅ ืืื ืึท ืืืฅ ืึธืืขืจ ืฆืืืื, ืื ื ืืืขืจ ืคืื ืงืึทื ืขืงืฉืึทื ื ืืื ืืขืขืจืขื ืืขืจ ืืขืืืืงืขืจ. ืคึผืืืก ืกืืื ืึทืืฉืขืจื, ืขืืืขืืข ืืขืืืื ืืืฉืึทื ื. ืคึผืฉืื ืกืงืืื ืงืขื ืขื ืืืื ืืืกืงืจืืืื ืืื ืืืขืจืืขืจ, ืึธืืขืจ ืืืื ืงืึธืืคึผืืืฆืืจื ืึธื ืขืก, ืึทืืขื ... (ื) "ืืื ืืืขืื ื ืืฉื ืคึฟืึทืจืฉืืืื, ืืืจ." ืขืก ืืขื ืขื ืคืืืข ืกืงืืื, ืขื ืืขืจืื ืืขื ืืึทืจืคึฟื ืฆื ืืืื ืืขืืืื ืฆื ืืื ืคึผืืจืืึทืืืงืื, ืขืคึผืืกืึธืืืง, ื.ื. ืงืขืกืืืืขืจ, ืืืืึทื ืืื ื ืึธืืืืื ืื ืึทื ืืืืืงืืื ื ืคืื ืืื ืืืขืจ ืคึผืจืึธืืืงืื.
ืืืจ ืงืขื ืขื ืืืืขื ืื HTML ืคืื ืื ืกืขืจืืืืก. ืืึธืื ืืืจ ืืขืคืจืืืื ืขืก?
ืื, ืืืืขืจ. ืคึฟืึทืจ ืืืึทืฉืคึผืื, ืืื ืืื ืื ืืจืึทืคืืงืก ืคืื gliffy.com. ืึธืืขืจ ืฆื ืืึทืื ืขื ืืขืจืื ืืขื, ืืืจ ืืึทืจืคึฟื ืฆื ืืืื ืฆื ืึท ืืจืื-ืคึผืึทืจืืื ืืื ืกื ืืื ืจืขืืึทืืืจื ืืึธืจื. ืืื ืขืก ืืื ืืขืจ ืฉืืืขืจ ืฆื ืืขืืึทืืืื ืงืขืจืขืงืฉืึทื ื ืฆื ืึท ืงืึธืืขืืข.
ืืืึธืก ืฆื ืืึธื?
ืืขืฆืื ืก ืืื ืืขืคึฟืื ืขื ืึท ืจืืคึผืึทืืึทืืึธืจื ืืื ืื ืจืขืงืึทืืึทื ืืืืฉืึทื ื ืืืืฃ Github . ืืืึทืืจืึทืืข ืืื ืงืึธื. ืืขื ืข. ืืืจ ืืึทืฉืจืืึทืื ืื ืงืจืืึทื ืืืึธืก ืืืจ ืืึทืจืคึฟื ืืื js. ืืืจ ืฉืจืืึทืื ืืขื js ืืืืึทื ืืื ืืขืจ ืืขืืืืงืขืจ HTML ืืื ืื ืื ืืขืจืข ืืึทืงืืืืขื ืืืืฉืึทื ืืขืงืกื ืืื.
ืืื, ืืื ืฉืจืืื ืืืงืืืขื ืืืฆืืข ื ืืฉื ืืื ืืื ืฆื ืืื HTML. ืืืคึผืืงืึทืืื, ืืึทืงืืืืขื ืืืืฉืึทื ืืื ืึท ืกืืื ืคืื ืืขืงืขืก ืืื ืืึทืจืงืืึทืื ืืขืงืกื, ืืืึธืก ืืื ืืึทื ืงืึธื ืืืขืจืืขื ืืื ืึท ืคืื-ืคืืขืืืฉื ืืึทืงืืืืขื ืืืืฉืึทื ืคึผืืึทืฅ ืืืจื ืขืืืขืืข ืืึธืืึธืจ, ืืืฉื Wintersmith. ืึธืืขืจ ืึท ืืืืงื ืกืืกืืขื.
ืขืก ืืืจื ืก ืืืืก ืืืืขืจ ืืึทืงืืืขื: ืืืจ ืืึธืื ืืขืฉืจืืื ืืขื ืืขืงืกื, ืืขืืึธืื ืืขืจ ืฉืจืืคื ืงืืืืื ืขืคืขื ืขื ืืื ืื 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>
ืืืืฃ ืื ืืืื ืืึทื ื, ืึทืืึท ืึท ืกืืขืืข ืืื ืึผืืขื ืึท ืคึผืึธืจ ืคืื ืงืึธื ืกืงืจืื ื ืืืืฃ ืึท ืืึทืคึผืืึทืคึผ, ืืืืฃ ืื ืื ืืขืจืข ืืึทื ื, ืื ืกืืจืืงืืืจ ืึท ืืึท ืืืฉืกืึธื ืึทืืึทืื ืืืจ ืฆื ืืขืฉืืืื ื ืคึผืืึธืืืืจื ืึทืืข ืื ืืึทืื ืืืจื ืึทื ืึทืืึทืืืฉื ืืื ืืืจ ืงืขื ืขื ื ืึธืืืึทืื ืคึผืึทืคึผ.
ืคืืจืืืืก ืืขื ืขื ืฉืืขืืขืก ืืขืฉืืขืื ืกืขืคึผืขืจืึทืืื ืคืื ื ืึธืืื?
ืขืก ืืื ืืขืจ ืืึทืงืืืขื. ืขืจืฉืืขืจ ืืืจ ืกืคึผืขืฆืืคืืฆืืจื ื ืึธืืื. ืืขืจื ืึธื ืืืจ ืงืขื ืขื ืกืคึผืขืฆืืคืืฆืืจื ืึท ืคึผืึธืจ ืคืื ืืจืืคึผืขืก ืืื ืึธื ืืืืึทืื ืืื ืืื ื ืึธืืื. ืืขืจื ืึธื ืืืจ ืืึทืฉืืืืขื ืื ืงืึทื ืขืงืฉืึทื ื. ืืื ืืืืื ืืขืืึธืื, ืืืขื ืื ืืืืคึผื ืึทืืืืฉืขืงืฅ ืืื ืงืึทื ืขืงืฉืึทื ื ืฆืืืืฉื ืืื ืืขื ืขื ืืึธืจื, ืืืจ ื ืขืืขื ืืืืฃ ืื ืึธืจื ืคืื ืื ืึทืืืืฉืขืงืฅ ืืืืฃ ืื ืืืึทืืจืึทืืข. ืึธืืขืจ ืคืึทืจืงืขืจื.
ืืื ืขืก ืืขืืืขื ืึธื ืฉืืขืืขืก?
ืขืก ืืื ืืขืืืขื ืึธื ืฉืืขืืขืก. ืืืขืจ ืขืก ืืืขื ืืืื ืึท ืืืกื ืงืจืึทืืคึผืึทืื ืืืจ ืงืขื ืขื ืืขื ืืขื ืึธืคึผืฆืืข ืืื ืื ืืืืฉืคืืื. ืืึธืก ืืื ืจืขืื ืฆื ืืขื ืคืึทืงื ืึทื ืขืก ืืื ืึท ืึทืืืขืจืืืึทื ืคึฟืึทืจ ืื ืึธืจื ืคืื ื ืึธืืื ืคึฟืึทืจ ืกืืืึธืกืงืึทืคึผืข , ืืืึธืก ืืืื ื ืขืื ืืื ืืฉืืื ืื ืืืึทืืืึทื ืคืื ืืจืืคึผืขืก. ืกืคึผืขืฆืืคืืฆืืจื ืฉืืขืืขืก ืืืื ืื ืืืึทืืจืึทืืข ืืขืจ ืงืึทื ืืจืึธืืืึทืืึทื, ืึธืืขืจ ืืื ืืขืจ ืืื ืข ืคืื โโืืขืจ ืขืจืฉืืขืจ ืคึผืืึทื ืคืื ืื ืืืึทืืจืึทืืข ืขืก ืืื ืืขืืืขื ืึธื ืฉืืขืืขืก.
ืฉืืขืืขืก ืงืขื ืขื ืืืื ืืืื ืกืคึผืขืกืืคืืขื ืืื ืื ืืึทืืืืขืฉืืคึผ ื ืืกื. ืืขื ืข. ืืืื ื ืึธืืข ืืื ืืืื ืืื a1, ืืื ืื ืื ืืขืจืข ืืื ื5. ืขืก ืืขืืคื ืกืคึผืขืฆืืขื ืึทื ืกืืืึธืกืงืึทืคึผืข ืืืื ืื ืึทืืืืฉืขืงืฅ ืืืืฃ ืื ืืืึทืืื ื ืืึทืืืขืืืขื, ื.ื. ืืืจ ืงืขื ืขื ืืึทื ืืื ืึทืจืื, ืืขื ืคืึทืจืฉืืืขื ืข ืืืืกืืืื ืึธืคึผืฆืืขืก, ืืื ืืขืืึธืื ืคืึทืจืจืืืื ืื ืึธืจืืขื ืื ื ืคืื ืื ืขืืขืืขื ืื ืืืึธืก ืืืจ ืืื ืืื ืืขื ืงืึธื.
ืืื ืึทืืืขืืืื, ืขืก ืืื ืคืึทืจืฉืืืืืง. ืงืขื ืขื ืืื ืคึผืจืืืืจื ืขืก?
ืคืื ืงืืจืก, ืฆื ืืขืฉืืืื ื ืืึทืื ืกืขืจืงืึทืฅ, ืืื ืืขืืืื ืืื ืึท ืงืืืื , ืืืึธืก ืืื ืืขืจืืืึทื ืืืงื ืื ืกืืฉืขืืึท ืืื ืกืืึธืจื ืื ืืขืฆืืข ืืืขืจืกืืข ืืื ืืขื ืืืขืืขืจืขืจ (ืืื ืืึธืงืึทื ืกืืึธืจืืืืฉ).
ืืึธืื ืืืจ ืืขืคืจืืืื ืขืก? ืืืฆื ืืืจ ืงืขื ืขื ืืืืื ืขืก ืฆื ืืืื ืืืึทื.
ืืขืจื ืึธื ืืืืืขืจ:
1. ืงืึทื ืขืงืืื ื ืื ืฉืจืืคื
<script src="https://unpkg.com/@antirek/network-diagram@0.1.4/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. ืืืจ ืจืขืืึทืืืจื ืื ืงืึธื ืฆื ืื ืืืึทืืจืึทืืข ืืืจ ืืึทืจืคึฟื (ืืื ืืจืึทืืื ืขืก ืืื ืืจืื ืืขืจ ืืื ืฆืืืืขื ืื ื ืึท ืึทืื :)
ืืขืจ ืคืจืืื ืืื ืืืืฃ ืืืืืื.
ืืขืจ ืจืขืืืืืึทื?
ืืื ืึทืืฉืืืื ืืืื ืืึธืืื - ืฆื ืืืืื ืื ืืื ืข ืืืืึทืืจืึทืื ืฆื ืื ืืึทืงืืืืขื ืืืืฉืึทื, ืื ืคึฟืึธืจืืึทื ืืื ืืึทื ืฅ ืคึผืฉืื ืืื ืคืึทืจืฉืืืืืง. ืขืก ืืื ื ืืฉื ืคึผืึทืกืืง ืคึฟืึทืจ ืกืืคึผืขืจ ืกืขืจืงืึทืฅ, ืึธืืขืจ ืคึฟืึทืจ ืงืืืื ืกืขืจืงืึทืฅ ืืืึธืก ืืขืจืงืืขืจื ืื ืกืืจืืงืืืจ ืคืื ืงืึทื ืขืงืฉืึทื ื, ืืึธืก ืืื ืืขืืึทืืจืข ืคืืึทื. ืืืจ ืงืขื ืขื ืฉืืขื ืืืง ืืขืฉืืืื ื ืืืืืง ืืื ืืืืฉื ืขืคึผืขืก ืืืืขืจ ืฆืืึทื. ืืึธ, ืืื ืืืจืื ืงืขื ืขื ืจืืืืืง ืขืคึผืขืก ืืื ืื ืืึธืง ืืื, ืืื ืืื ืืกืืขืจ ืงืึทืคึผืฉืึทื ื ืคึฟืึทืจ ืึทืืืืฉืขืงืฅ, ืึธื ืกืคึผืขืฆืืขื ืืจืืื ืื ื))
ืืืึธืก ืงืขื ืขื ืืืื ืืืคึผืจืืืื?
ืขืก ืืขื ืขื, ืคืื ืงืืจืก, ืึท ืคึผืืึทืฅ ืคืื ืึธืคึผืฆืืขืก ืืึธ. ืืืื ื ืึธื ืืืงืึทื ื (ืึทืืข ืืืืืกืืื ื ืึธื ืขืก ืืขื ืขื ืืืกืืฃ ืื ืืื ืข ืฆื ืื ืฉืจืืคื). ืงืืืึทืื ืึท ืืขืจ ืืงืกืคึผืจืขืกืืื ืืึทื ื ืคืื ืืืงืึทื ื. ืืึทืื ืขืก ืืขืืืขื ืฆื ืกืคึผืขืฆืืคืืฆืืจื ืื ื ืืกื ืคืื ืื ืงืฉืจ ืฉืืจื. ืืืื ืึท ืืื ืืขืจืืจืื ื ืืืื.
ืืืืก ืืืื ื ืืืจ?
ืืื ืืึธืื ืฉืืื ืขืืืขืืข ืืืืืึทื ืคึฟืึทืจ ืืืคึผืืึทืืขื ืืืืฉืึทื ืืื ืืฉืื, ืืืจ ืงืขื ืขื ืืืื ืืืืื ืืืื ืืื ืื ืืึทืืขืจืงืื ืืขื.
ืืืึทื ืืืืืื ื ืืื ืืืฉืืืื ืึธื ืืืขื ืืืขื ืืื ืึท ืฉืืึธื ืงืืื ืคืื ืคึผืจืึธืืืขืืก, ืืื ืืึธืืขืจ ืืืจ ืืืขื ืืขืคึฟืื ืขื ืึท ืืขืจ ืืึทืงืืืขื ืืขืฆืืึทื ืคึฟืึทืจ ืฆืืืืขื ืื ื ืืืืึทืืจืึทืื ืืืจื ืคืฉืื ืงืึธืืืจืื ื ืืื - ืืื ืืื ืืึธืื 'ืืืืึทืื ืืืจ ืืืื ืืืึทืืจืึทืืข ืืื ืงืึธื'
- (9 ืืืืคึผืก ืคืื ืืฉืึทืจืฅ ืึธื ืืืื ืจืขืืึทืงืืึธืจ)
- ืืื ืืืื ืืืจ ืืื ืกืืคึผืขืจ ืืืืืืื ืืื ืงืึธืืคึผืืืฆืืจื ืืืืึทืืจืึทืื, ืืืจ ืืืขื ืืืฉืืืื ืืึทืืืื ืืขืจื ืืขื ืคึผืจืืืขืงื:
ืืงืืจ: www.habr.com
