Hoahoa whatunga hei waehere / hoahoa Whatunga hei waehere

I nga tau e rua kua taha ake nei kua kaha ake au ki nga tuhinga. Ko te tuhi i tetahi tuhinga whakamaarama mo te mahi o tetahi punaha he maamaa noa. Ko te tuhi hoahoa ka whakaatu i nga taonga matua katoa me nga hononga i waenga i enei taonga he ngawari hoki.

Engari ko te mea tino raru ko te pupuri i enei tuhinga ki te waa. A ka pai te tuhinga, engari ko nga hoahoa... Na te mea... kei te ipurangi nga tuhinga katoa, ara. i te whakatakotoranga html, ka haere tahi te tuhinga me nga pikitia gif/jpeg/png, e whakaatu ana i nga hoahoa. A ka tuhia nga hoahoa ki nga momo kaupapa penei i a Visio me nga ratonga ipurangi a la draw.io. Na ka kaweake koe i te hoahoa ki te whakatakotoranga whakairoiro ka whakapiri atu ki te html. He maamaa noa.

He aha te raru?

He ngawari noa nga kaupapa. He tika ake, ehara i te mea tino uaua. Ae, ko te maha o nga mea he tatini, rua ranei, he rite tonu te maha o nga hononga. Me nga hainatanga, etahi tohu. Ka taea te whakaahua i nga kaupapa ngawari ki nga kupu, engari he uaua rawa, ahem... (c) "kaore e marama, e te rangatira." He maha nga kaupapa, me whakarereke i a raatau i ia wa, i nga waahanga, i.e. tonu, no te mea whai ratou i te whanaketanga o to tatou hua.

Ka taea e koe te whakauru i te html o te ratonga. Kua whakamatauria e koe?

Ae, pono. Hei tauira, he pai ki ahau nga whakairoiro mai i gliffy.com. Engari ki te whakarereke, me haere koe ki tetahi ratonga tuatoru ka whakatika ki reira. A he uaua ake te tuku whakatikatika ki tetahi hoa mahi.

Me aha ahau?

I tata nei ka kite ahau i tetahi putunga i runga i a Github i roto i nga taunakitanga github.com/RaoulMeyer/diagram-as-code. Hoahoa hei waehere. Ko era. whakaahua tatou i te ara iahiko e hiahia ana tatou i roto i te js. Ka tuhi tika matou i tenei js ki te html ano kei reira etahi atu tuhinga tuhinga.

Ma te ara, ka tuhia e ahau nga tuhinga kaore i te html katoa. Ko te tikanga, ko te tuhinga he huinga o nga konae me nga tuhinga tohu, ka huri hei pae tuhinga katoa e etahi miihini, hei tauira te kaitarai hotoke. He punaha wiki ranei.

He tino watea: kua tuhia e matou te tuhinga, katahi ka tuwhera te tohu tuhinga ka whakaatuhia te waehere JS o te kaupapa ki roto.

He aha ano te he?

I pai ahau ki tenei putunga, engari ehara tenei i te tauira anake ka tuhia he hoahoa ma te whakamahi i te waehere, i te tohu tuhinga ranei. (I te mutunga o te tuhinga ka whai hononga ki nga kaupapa me nga tuhinga i rapua e au mo te hoahoa kaupapa hei waehere.)

A ehara i te mea ko ahau anake te whakatika i nga tuhinga. I etahi wa ka whai waahi ano nga hoa mahi - whakatika i tetahi kupu, whakarereke i te whakaahuatanga, whakauru pikitia hou. 

Na reira, e hiahia ana ahau ki te kite i te hoahoa i roto i te whakatakotoranga tuhinga ka taea te panui me te maarama e kore e hiahiatia he anau ako roa. A i etahi waahi ka taea e koe te kape-whakapiri kia tere ake te taapiri i tetahi ara iahiko hou. 

Na tetahi atu hoa mahi i kii ko te waehere, he pai, engari ki te whakamahi koe i te hanganga, ka taea e nga mea katoa te tino kaha me te whakaatu.

Na reira, i ngana ahau ki te whakaaro i te hoahoa hei huinga huinga iti e whakaatu ana i nga pona, nga hononga, nga roopu o nga pona, me te waahi o nga pona. I puta mai, ki taku whakaaro iti, he tino watea, ahakoa, ko te tikanga, ko te reka me te tae...

He pehea tenei he tūtohi i roto i te huānga?

  • Ko ia node e whakaahuatia ana e tetahi kaitautuhi e tohu motuhake ana i te node.
  • Ka taea hoki e koe te taapiri i tetahi ata ki te node me te taapiri i tetahi tuhinga.
  • Ka taea e koe te tohu hononga i waenga i nga pona e rua.
  • Mo te whakawhitiwhiti korero i runga i te hoahoa, ka taea e koe te whakarite i te tae me te tuhi.
  • Ko te ahunga o te whakawhitiwhitinga korero mai i te puna ki te whaainga. A ko te puna me te whaainga e tohuhia ana e nga kaitautuhi node.
  • Ka taea te taapiri kia kotahi, neke atu ranei nga pona ki tetahi roopu.
  • Ka taea hoki te tohu te hononga mai i te roopu me te roopu.

Ma te whakamahi i enei ture ngawari, ka whiwhi tatou i te hoahoa e whai ake nei. Tika? Tino.

Hoahoa whatunga hei waehere / hoahoa Whatunga hei waehere

Na ka whakaahuahia e te waehere js e whai ake nei. Ko te mea nui i konei ko te ahanoa huānga. I roto i nga waahanga e tohuhia ana - nga pona, nga taha - nga hononga.
 

  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);

Ko te tikanga, kaore au i kii ake i te tuhi o te ara iahiko, engari i whakamahia e au te whare pukapuka cytoscape.js he taputapu whakakitenga tino kaha. Ka whakamahia e au he hautanga o nga mea ka taea i taku otinga. 

Kaati, he tauira ngawari tenei. Ka taea te uaua ake?

Ae koa koa. Hei tohu i nga tuunga, ka whakamahia nga tuunga, hei tohu i nga roopu, ka tohuhia he rarangi o nga roopu i roto i nga roopu, me nga huānga ake he huanga roopu.

Hoahoa whatunga hei waehere / hoahoa Whatunga hei waehere

A koinei te waehere:

<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>

I tetahi taha, ko te kaupapa penei he tata ki te rua nga mata o te waehere i runga i te pona, i tetahi atu ringa, ko te hanganga a la json ka taea e koe te whakakii i nga raraunga katoa ma te whakataurite, tere ka taea e koe te kape-whakapiri.

He aha i wehea ai nga tuunga mai i nga pona?

He pai ake. Tuatahi ka tohua e matou nga node. Na ka taea e tatou te tohu i nga roopu e rua ka tohu ki roto i nga waahanga. Na ka tohua e matou nga hononga. Na, katahi ano ka noho nga taonga matua me nga hononga i waenganui i a raatau, ka tirohia te waahi o enei taonga kei te hoahoa. He rereke ranei.

Ka taea te kore he tuunga?

Ka taea te kore tuunga. Engari he iti noa iho te ahua; ka kite koe i tenei whiringa i roto i nga tauira. Ko tenei na te mea he algorithm mo te waahi o nga pona mo te cytoscape fcose, e whai whakaaro ana hoki ki te aroaro o nga roopu. Ma te whakatau i nga tuunga ka kaha ake te whakahaere i te hoahoa, engari i te wahanga o te tauira tuatahi o te hoahoa ka taea te kore he tuunga.

Ka taea hoki te tohu i nga tuunga ki te ahua o te Pakanga. Ko era. Ko tetahi pona kei te a1, ko tetahi kei te d5. Ka tino awhina i te cytoscape kia neke nga mea kei runga i te kanawehi, ara. ka taea e tatou te neke haere, ka kite i nga whiringa tahora rereke, ka whakatika i te whakaritenga o nga huānga e pai ana ki te waehere.

I te nuinga o te waa, he maarama. Ka taea hoki e koe te whakamatau?
 
Ko te tikanga, ki te hanga tere iahiko, i hanga e ahau he iti te kaitautoko, e whakahōu ana i te aronuinga me te penapena i te putanga hou i roto i te tirotiro (i roto i te Roopu Roopu).

Kua whakamatauria e koe? Ka taea e koe te taapiri atu ki to wharangi.

Katahi ano:

1. Te hono i te tuhinga

<script src="https://unpkg.com/@antirek/[email protected]/dist/code-full.min.js"></script>

2. Tāpiri waehere ki te 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. ka whakatika tatou i te waehere ki te hoahoa e hiahiatia ana (Ki taku whakaaro he maamaa ake i te tuhi ruru :)

Ētahi atu kōrero i wharangi kaupapa i runga i te github.

He aha i te mutunga?

I tutuki e au aku whainga - ki te taapiri i nga hoahoa raarangi ki nga tuhinga, he maamaa te whakatakotoranga me te maarama. Ehara i te mea e tika ana mo nga hikoi nui, engari mo nga waahi iti e whakamarama ana i te hanganga o nga hononga, he tino pai. Ka taea e koe te huri tere me te huri i tetahi mea i roto i te waa. Ae, ka taea e nga hoa mahi te whakatika i tetahi mea i roto i te tauranga, i te iti rawa nga tapanga mo nga taonga, kaore he whakangungu motuhake))

He aha te mea ka taea te whakapai ake?

Ko te tikanga, he maha nga whiringa kei konei. Tāpirihia nga tohu taapiri (ka taapirihia nga mea katoa o mua ki te raarangi ki te tuhinga). Whiriwhiria he huinga ata whakaatu ake. Kia taea te tautuhi i te ahua o te raina hononga. Tāpirihia he whakaahua papamuri.

He aha to whakaaro?
 
He maha aku whakaaro mo te whakatinanatanga i roto i nga take, ka taea ano e koe te taapiri i a koe ki nga korero.

E tika ana taku otinga i roto i te maha o nga raru raru, a tera pea ka kitea e koe he taputapu pai ake mo te tuhi hoahoa ma te tohu noa - e kii ana ratou 'whakakitea mai to hoahoa hei waehere'

  1. He pai te whiriwhiri
  2. He ratonga nui (9 momo tūtohi ētita ipurangi)
  3. Ko te tikanga, mermaid.js
  4. A, ki te pai koe ki nga hoahoa tino kiko me te uaua, ka tino miharo koe ki tenei kaupapa: haere.drawthe.net

Source: will.com

Tāpiri i te kōrero