Proximis duobus annis in documentis implicatus sum. Textus explanatorius scribebat quomodo particularis systematis opera plerumque satis simplex est. Trahendo schemate quod omnia clavium rerum et nexus inter obiecta ostendet facile est etiam.
Sed aspectus maxime inconveniens hoc documentum usque in hodiernum diem observat. Et textus subtilis esset, sed diagrammata... Quia... omnibus documentis online, i.e. in HTML forma, textus cum imaginibus gif/jpeg/png, quae schemata actu ostendunt. Diagrammata in variis programmatibus trahuntur ut visio vel online operas a la draw.io. Deinde tabulam in forma graphica exportare et eam ad html applica. Simplex est.
Quod suus problema?
Cogitationes plerumque simplices sunt. Accuratius non admodum complicatus. Ita numerus rerum duodeviginti vel duo est, numerus nexuum idem fere est. Plus signaturae, nonnullae notationes. Simplicia consilia verbis describi possunt, sed nimis implicatae, ahem... (c) "Noli intellegunt, domine." Multae sunt technae mutationes, iis periodice faciendae, episodicly, i.e. constanter, quod progressus nostri consequat.
Emancipare potes HTML officii. Probasti?
Ita. Exempli gratia, amo graphics ex gliffy.com. Sed ut mutationes, ad tertiam partem servitii debes ire et ibi recensere. Et difficilius est correctiones collegae delegare.
Quid faciam?
Nuper veni in promptuario in Github laudatis . Tabula ad Codicem. Illae. ambitum, quem in ys. Haec js directe scribimus in eodem HTML in quo ceterae litterae documenta sunt.
Obiter documenta scribo non omnino in HTML. De more documentorum est copia documentorum cum textu notae notae, quae deinde in documentum plenae discursionis a quodam machinamento convertitur, exempli gratia hiemalis. Aliquam vel felis quam.
Commodissimum evenit: textum scripsimus, tum scriptura tag aperit et codicem JS schema descriptum in eo.
Quid rursus mali?
Hoc repositorium probavi, sed hoc unicum exemplum non est ubi schema deducitur utens codice vel textu repraesentationis. (In fine articuli nexus erunt cum inceptis et articulis quos ego Googled in argumento schematis in codice.)
Neque ego solus documenta edo. Interdum etiam collegae conferunt - verbum corrigere, descriptionem mutare, novas imagines inserere.
Quare velim videre in schemate de forma textu facili et intellectu facili quae longam curvam discendi non requirit. Et in quibusdam locis etiam simpliciter crustulum imitari potes ut novum ambitum acceleret addens.
Et alius collega notavit codicem esse quidem bonum, sed si uteris structura, omnia possunt esse valde stricta et expressiva.
Propterea schema conabar fingere in statuto variarum vestium parvarum quae nodos, nexus, coetus nodi describant, ac situm nodi. Contigit, meo humili iudicio, satis opportunum, sed utique, sapore et colore.
Quomodo est haec chartula in apparatu?
- Singulis nodi describitur per identifier, quod unice nodi agnoscit.
- Iconem nodi addere potes et epigramma addere.
- Relationem inter duos nodos definire potes.
- Ad notificationem de schemate, colorem et inscriptionem potes ponere.
- Directio communicationis a fonte ad scopum definitur. Fons et clypeus et identificatores nodi indicantur.
- Nodi unus vel plures ad coetum addi possunt.
- Relatio quoque definiri potest tam e coetu quam coetui.
His simplicibus regulis utentes, sequenti schemate consequimur. Justo? QuiT.
et js codice sequenti describitur. Rem consectetur hic sit rerum consequatur. In quibus nodi designantur nodos, oras - nexus.
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);
Utique non accessi per me ambitus tractus, sed bibliotheca usus sum Plurimum visualisation instrumentum. Tantum fractionem facultatum in solutione mea utor.
Bene, simplex exemplum. An potest esse magis complicata?
Etiam commodo. Ad positiones indicandas, positiones utimur, coetus indicamus, indices circulorum in circulos indicamus, et ipsa elementa coetus attributum habent.
Et hoc est signum:
<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>
Ex altera parte, talis schema est fere duo tegumenta codicis in laptop, ex altera vero parte, structura la json permittit ut omnia notitia analogice impleas, cito et crustulum imitari potes.
Cur separatim a nodis collocantur?
Suavior est. Nodos primum nominamus. Tunc duos circulos exprimere possumus eosque in nodis designare. Tunc hospites designamus. Tum demum, ubi praecipuae res et nexus inter eos sunt, locum earum rerum in schemate accipimus. Vel contra.
An sine positionibus fieri potest?
Potest autem esse sine positionibus. At enim paulo incubuisset: hanc optionem in exemplis videre potes. Hoc accidit ex eo quod algorithmus est pro locatione nodorum pro cytoscape qui etiam praesentiam coetuum rationem habere videtur. Schema specificum moderatiorem efficit, sed in prima schemate schematis sine positionibus fieri potest.
Positiones etiam in stilo Battleship definiri possunt. Illae. una nodi sita est in a1, altera in d5. Maxime iuvat quod cytoscape obiecta in carbasa mobilia facit, i.e. eas circum movere possumus, optiones layout varias videre, ac deinde dispositionem elementorum, quam in codice habemus, figere.
In genere, intellegibile est. Etiam experiri potes?
Scilicet, ut cito circulos crearem, parvum me feci qui schema ipsum renovat et novissimam versionem in navigatro reponit (in localStorage).
Probasti? Hanc paginam addere iam potes.
Et iterum:
1. Connectens scriptor
<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>
2. Adde codicem ad 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. codicem recensuimus ad schematis quod opus est (facilius puto quam noctuam trahere :)
More details at on github.
Quod effectus?
Metas meas consecutus sum - ut inlineas tabulas in documentis addere, forma plane simplex et comprehensibilis est. Super gyros non convenit, sed pro parvis circuitibus qui structuram nexuum explicant, omnino finis est. Cito tweak semper potes et aliquid super tempus mutare. Ita, et collegae aliquid in ipsis navalibus corrigere possunt, saltem captiones pro obiectis, sine speciali disciplina)
Quid emendari potest?
Sunt utique hic bene multum. Iconibus additis (omnia quae extant inline ad scripturam adduntur). Expressiorem iconum copia elige. Fac ut stylum nexus lineae exprimeret. Imaginem addere.
Quid tibi videtur?
Plures notiones iam habeo ad exsequendum in quaestionibus, tuas etiam in commenta addere potes.
Solutione mea definite applicabilis est in angusto problematum amplitudine, et fortasse commodius instrumentum ad schemata delineandi invenias eas simpliciter coding - ut dicunt 'monstra mihi codicem tuum'
- (9 genera chartarum online editor)
- Et si libet diagrammata eximius enucleate et multiplex, tunc hoc propositum plane miraberis:
Source: www.habr.com