xxxxxxxxxx1013
// talonendm 2023-// Mermaid experiments, examples in array.// examples based on: https://mermaid.live/// .....................................let definitions = [];let diagrams = [];let currentDiagramIndex = 0; // 0// .....................................// .....................................// Diagrams:// .....................................function DefineDiagrams() { // ..................................... definitions.push(` gitGraph TB: commit id: "aloitus" branch korjaus checkout korjaus commit id: "korjattu" branch tec checkout tec commit id:"lausunto" tag:"12.4.2016" commit id:"adsh" tag:"2021" branch kirja checkout kirja commit id: "mot" type:HIGHLIGHT checkout main checkout korjaus commit type:NORMAL checkout tec `); // ............................. // ..................................... definitions.push(` gitGraph TB: commit commit id: "Normal" tag: "v1.0.0" commit commit id: "Reverse" type: REVERSE tag: "RC_1" commit commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" commit`); // ..................................... // ..................................... definitions.push(` %% CSV !!!!!sankey-betaEnergy, Hot Water, 8Energy, Heating,59Energy, Lighting,8Energy, Kitchen, 3Energy, Cooking, 2Energy, Hygiene, 2Cooking, Kitchen, 2Energy, Sauna, 5Sauna, Heating, 3Sauna, Hygiene, 2Hot Water, Hygiene, 5Hot Water, Kitchen, 3Fire place, Heating, 9People, Heating, 7Candles, Heating, 0.799Candles, Lighting, 0.001Energy, Electronic devices, 13Electronic devices, Lighting, 2Electronic devices, Heating, 11`); // ..................................... // ..................................... definitions.push(` block-betacolumns 1 db(("DB")) blockArrowId6<[" "]>(down) block:ID A B["A wide one in the middle"] C end space D ID --> D C --> D style B fill:#939,stroke:#333,stroke-width:4px`); // ..................................... // ..................................... definitions.push(` %% CSV !!!!!block-beta columns 3 a space b c d e`); // ..................................... // ..................................... definitions.push(` xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] `); // ..................................... // ..................................... definitions.push(` %% CSV !!!!!block-beta columns 3 a space b c d e`); // ..................................... // ..................................... definitions.push(` %% CSV !!!!!sankey-betaPumped heat, Door,100Pumped heat, Window, 50Pumped heat, Food, 20Pumped heat, Other, 20Panel, Other, 10`); // ..................................... // ..................................... definitions.push(` %% CSV !!!!!sankey-betaBio-conversion,Losses,26.862Bio-conversion,Solid,280.322Bio-conversion,Gas,81.144`); // ..................................... // ..................................... definitions.push(` sankey-beta%% source,target,valueElectricity grid,Over generation / exports,104.453Electricity grid,Heating and cooling - homes,113.726Electricity grid,H2 conversion,27.14`); // ..................................... // ..................................... definitions.push(` ---config: sankey: showValues: false---sankey-betaAgricultural 'waste',Bio-conversion,124.729Bio-conversion,Liquid,0.597Bio-conversion,Losses,26.862Bio-conversion,Solid,280.322Bio-conversion,Gas,81.144Biofuel imports,Liquid,35Biomass imports,Solid,35Coal imports,Coal,11.606Coal reserves,Coal,63.965Coal,Solid,75.571District heating,Industry,10.639District heating,Heating and cooling - commercial,22.505District heating,Heating and cooling - homes,46.184Electricity grid,Over generation / exports,104.453Electricity grid,Heating and cooling - homes,113.726Electricity grid,H2 conversion,27.14Electricity grid,Industry,342.165Electricity grid,Road transport,37.797Electricity grid,Agriculture,4.412Electricity grid,Heating and cooling - commercial,40.858Electricity grid,Losses,56.691Electricity grid,Rail transport,7.863Electricity grid,Lighting & appliances - commercial,90.008Electricity grid,Lighting & appliances - homes,93.494Gas imports,Ngas,40.719Gas reserves,Ngas,82.233Gas,Heating and cooling - commercial,0.129Gas,Losses,1.401Gas,Thermal generation,151.891Gas,Agriculture,2.096Gas,Industry,48.58Geothermal,Electricity grid,7.013H2 conversion,H2,20.897H2 conversion,Losses,6.242H2,Road transport,20.897Hydro,Electricity grid,6.995Liquid,Industry,121.066Liquid,International shipping,128.69Liquid,Road transport,135.835Liquid,Domestic aviation,14.458Liquid,International aviation,206.267Liquid,Agriculture,3.64Liquid,National navigation,33.218Liquid,Rail transport,4.413Marine algae,Bio-conversion,4.375Ngas,Gas,122.952Nuclear,Thermal generation,839.978Oil imports,Oil,504.287Oil reserves,Oil,107.703Oil,Liquid,611.99Other waste,Solid,56.587Other waste,Bio-conversion,77.81Pumped heat,Heating and cooling - homes,193.026Pumped heat,Heating and cooling - commercial,70.672Solar PV,Electricity grid,59.901Solar Thermal,Heating and cooling - homes,19.263Solar,Solar Thermal,19.263Solar,Solar PV,59.901Solid,Agriculture,0.882Solid,Thermal generation,400.12Solid,Industry,46.477Thermal generation,Electricity grid,525.531Thermal generation,Losses,787.129Thermal generation,District heating,79.329Tidal,Electricity grid,9.452UK land based bioenergy,Bio-conversion,182.01Wave,Electricity grid,19.013Wind,Electricity grid,289.366`); // ..................................... // ..................................... definitions.push(` %% CSV !!!!!sankey-betaBio-conversion,Losses,26.862Bio-conversion,Solid,280.322Bio-conversion,Gas,81.144`); // ..................................... // ..................................... definitions.push(` mindmapRoot A B id[I am a square] C id))I am a bang(( id(I am a rounded square) id)I am a cloud( id{{I am a hexagon}} AA ::icon(fas fa-wrench) B(B) ::icon(mdi mdi-skull-outline)`); // ..................................... // ..................................... definitions.push(` timeline title History of vaa 2010 : feik 2012 : "R ohjett" : Google 2015 : kirja 2017 : kat 2020 : rekl 2021 : selv 2022 : laki 2023 : kirje 2024 : KRIL `); // ..................................... // ..................................... definitions.push(` gitGraph commit id: "Normal" commit commit id: "Reverse" type: REVERSE commit commit id: "Highlight" type: HIGHLIGHT commit`); // ..................................... // ..................................... definitions.push(` gitGraph TB: commit commit id: "Normal" tag: "v1.0.0" commit commit id: "Reverse" type: REVERSE tag: "RC_1" commit commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" commit`); // ..................................... // ..................................... definitions.push(` gitGraph TB: commit id: "aloitus" branch korjaus checkout korjaus commit id: "korjattu" branch develop checkout develop commit id:"ash" tag:"abc" branch featureB checkout featureB commit type:HIGHLIGHT checkout main checkout korjaus commit type:NORMAL checkout develop commit type:REVERSE checkout featureB commit checkout main merge korjaus checkout featureB commit checkout develop branch featureA commit checkout develop merge korjaus checkout featureA commit checkout featureB commit checkout develop merge featureA branch release checkout release commit checkout main commit checkout release merge main checkout develop merge release`); // ..................................... // ..................................... definitions.push(` %% POHJAclassDiagram Asukas "1" --> "*" Remontti`); // ..................................... // ..................................... definitions.push(` %% POHJAclassDiagram Asukas "1" --> "*" Remontti`); // ..................................... // ..................................... definitions.push(` requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } functionalRequirement test_req2 { id: 1.1 text: the second test text. risk: low verifymethod: inspection } performanceRequirement test_req3 { id: 1.2 text: the third test text. risk: medium verifymethod: demonstration } interfaceRequirement test_req4 { id: 1.2.1 text: the fourth test text. risk: medium verifymethod: analysis } physicalRequirement test_req5 { id: 1.2.2 text: the fifth test text. risk: medium verifymethod: analysis } designConstraint test_req6 { id: 1.2.3 text: the sixth test text. risk: medium verifymethod: analysis } element test_entity { type: simulation } element test_entity2 { type: word doc docRef: reqs/test_entity } element test_entity3 { type: "test suite" docRef: github.com/all_the_tests } test_entity - satisfies -> test_req2 test_req - traces -> test_req2 test_req - contains -> test_req3 test_req3 - contains -> test_req4 test_req4 - derives -> test_req5 test_req5 - refines -> test_req6 test_entity3 - verifies -> test_req5 test_req <- copies - test_entity2`); // ..................................... // ..................................... definitions.push(` %% Flow https://mermaid.js.org/syntax/flowchart.htmlgraph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02] `); // ..................................... // ..................................... definitions.push(`%% GitgitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit branch test commit id: "Alpha" commit id: "Alpha" commit id: "Alpha" checkout main commit id: "cool" `); // ..................................... // ..................................... definitions.push(` %% sequenceDiagram: https://mermaid.js.org/syntax/sequenceDiagram.html%% tositapahtumiin perustuva keskustelu%% Sekvenssikaavio on vuorovaikutuskaavio, joka näyttää, miten asiakas ja urakoitsija vuorovaikuttavat keskenään ja missä järjestyksessä erilaiset tapahtumat tapahtuvat heidän ensimmäisessä kommunikoinnissaan. - ChatGPT 3.5sequenceDiagram asukas->>+urakoitsija: Onkohan remontti mennyt ihan putkeen? asukas->>+urakoitsija: Haloo, oletteko siellä? urakoitsija-->>-asukas: Hei, miten voin auttaa? asukas->>+urakoitsija: Olen yrittänyt tavoitella, ongelmia rakenteissa. urakoitsija-->>-asukas: Ok, ei varmaan mitään vakavaa.. urakoitsija-->>-asukas: Keskustelen ensin päällikön kanssa ja palaan sitten asiaan. `); // ..................................... // ..................................... definitions.push(` %% https://mermaid.js.org/syntax/classDiagram.htmlclassDiagram Asukas "1" --> "*" Remontti Henkilö "1" --> "1..*" Kirja Kirja --> "monta" Kirjain : Sisältää`); // ..................................... // ..................................... definitions.push(` %% Flow https://mermaid.js.org/syntax/flowchart.html%% PROSESSIOIKEUDEN LÄHTEET (s.5) %% TODO: Tarkista 3.2.2024%% POS Jokaisella on oikeus saada asiansa käsitellyksi asianmukaisesti ja ilman aiheetonta viivytystä lain mukaan toimivaltaisessa tuomioistuimessa tai muussa viranomaisessa sekä oikeus saada oikeuksiaan ja velvollisuuksiaan koskeva päätös tuomioistuimen tai muun riippumattoman lainkäyttöelimen käsiteltäväksigraph TD EIS[Euroopan neuvoston ihmisoikeussopimus EIS] YKK[Yhdistyneiden kansakuntien kansalaisoikeus] KP[poliittisia oikeuksia koskeva kansainvlinen yleissopimus KP-sopimus] EIS-. artikla .->OO(oikeudenmukaiseen oikeudenkäynti) KP-. artikla .->OO EIS-->oj(ohjelmallisia ja julistuksenomaisia) EIS-->EIT[Euroopan ihmisoikeustuomioistuimen EIT] style EIS fill:#f9f,stroke:#333,stroke-width:4px style KP fill:#bbf,stroke:#972525,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 `); // ..................................... // ..................................... definitions.push(` %% Flow https://mermaid.js.org/syntax/flowchart.html%% PROSESSIOIKEUDEN LÄHTEET (s.5) %% TODO: Tarkista 3.2.2024%% POS Jokaisella on oikeus saada asiansa käsitellyksi asianmukaisesti ja ilman aiheetonta viivytystä lain mukaan toimivaltaisessa tuomioistuimessa tai muussa viranomaisessa sekä oikeus saada oikeuksiaan ja velvollisuuksiaan koskeva päätös tuomioistuimen tai muun riippumattoman lainkäyttöelimen käsiteltäväksigraph TD B:::foo C:::bar classDef foo stroke:#f00 classDef bar stroke:#0f0 A0[fa:fa-ban Kirjoitettu laki] --> PO H0[tavanomaisella oikeudella eli maantavalla]-->POsubgraph "One" PO[Prosessioikeus] --> B(Prosessimenettely) B --> C[rikosprosessilaki, ROL]end C-. text .-> B B --> D[oikeudenkäymiskaari] D-->E(siviiliasioissa säätelevä yleislaki) OK[oikeudenkäymiskaari OK 1:11] Tuomioistuinlaki --x OK OK-->tm("todistelu ja muutoksenhaku ❤ Unicode") tm-->ROL["rikosasioiden tuomioistuinkäsittely ROL (12:1)"] ROL --x E PL[Suomen perustuslain PL 21 §]-->pos(perusoikeussäännös) pos-. ohjausvaikutus .->PO PL0(((PL)))-->PL `); // ..................................... // ..................................... definitions.push(` quadrantChart title Kampanjan kattavuus ja osallistuminen x-axis Alhainen ulottuvuus --> Korkea ulottuvuus y-axis Matala osallistuminen --> Korkea osallistuminen quadrant-1 Tulisi laajentaa quadrant-2 "Tarvitsee edistämistä" quadrant-3 Uudelleenarvioitava quadrant-4 Saattaa parantua Kampanja A: [0.31, 0.63] Kampanja B: [0.45, 0.233] Kampanja C: [0.572, 0.69] Kampanja D: [0.918, 0.74] Kampanja E: [0.420, 0.34] Kampanja F: [0.335, 0.738]`); // ..................................... // ..................................... definitions.push(` quadrantChart x-axis Kiireellinen --> "Ei kiirettä" y-axis "Voit unohtaa" --> "Tärkeä ❤" quadrant-1 Suunnittele quadrant-2 Toimi quadrant-3 Delegoi quadrant-4 Poista `); // ..................................... // ..................................... definitions.push(` pie showData title Pellin ainesosat "Kromi" : 18 "Nikkeli" : 8 "Kupari" : 2 "Typpi" : 1 "Rauta" : 40`); // ..................................... // ..................................... definitions.push(` %% POHJAclassDiagram Asukas "1" --> "*" Remontti`); // ..................................... // ..................................... definitions.push(` %% POHJAclassDiagram Asukas "1" --> "*" Remontti`); // ..................................... // ..................................... definitions.push(` %% Beginner's tip—a full example using interactive links in an html context: https://mermaid.js.org/syntax/gantt.html gantt dateFormat YYYY-MM-DD section Clickable Visit mermaidjs :active, cl1, 2014-01-07, 3d Print arguments :cl2, after cl1, 3d Print task :cl3, after cl2, 3d click cl1 href "https://www.example.com/" click cl2 call printArguments("test1", "test2", test3) click cl3 call printTask() </pre> <script> const printArguments = function (arg1, arg2, arg3) { alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3); }; const printTask = function (taskId) { alert('taskId: ' + taskId); }; const config = { startOnLoad: true, securityLevel: 'loose', }; mermaid.initialize(config); </script>`); // ..................................... // ..................................... definitions.push(` %% https://mermaid.js.org/syntax/gantt.html%% A colon, :, separates the task title from its metadata. Metadata items are separated by a comma, ,. Valid tags are active, done, crit, and milestone.gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Julkaisut asennusohjeet :a1, 2010-04-01, 30d Create tests for parser :crit, active, 33d Another task :after a1, 20d section Another Task in Another :2014-01-12, 12d another task :24d section Tapahtumat Fuusio :milestone, done,2014-01-12, 120d www päivitys :24d Markkinointivideo :2019-01-12, 12d section Yhteistyökumppanit lausunto :done, 2014-01-12, 2019-08-12 virhe :2014-01-12, 2019-08-12 ohjeistus : 2020-02-01, 30d Markkinointivideo :2023-01-12, 12d A task: 2017-07-24, 20d`); // ..................................... // ..................................... definitions.push(` %% https://mermaid.js.org/syntax/userJourney.html%% Vastaaja eli syyetetty, fiktiivinen %% Käyttäjäpolut kuvaavat yksityiskohtaisesti eri käyttäjien suorittamat vaiheet tietyn tehtävän suorittamiseksi järjestelmässä, sovelluksessa tai verkkosivustolla. Tämä tekniikka näyttää nykyisen (ensisijaisen) käyttäjätyönkulun ja paljastaa parannuskohteet tulevan (tavoitetilan) työnkulun suhteen. Kun sovelletaan Suomen oikeusasteisiin, tämä auttaisi ymmärtämään, miten eri osapuolet, kuten kantaja ja vastaaja, käyvät läpi eri vaiheet oikeusjärjestelmässä tietyn asian käsittelyssä. -ChatGPT 3.5journey title Yleiset tuomioistuimet section Käräjäoikeus Asia selviää nyt: 5: kantaja Odotusta 1-2 vuotta: 3: kantaja Päätös: 1: kantaja, Vastaaja section hovioikeus Go downstairs: 2: kantaja, Vastaaja Odotusta X vuotta: 2.5: kantaja Päätös: 0: kantaja, Vastaaja section korkeinoikeus valituslupa: 1: kantaja, Vastaaja Odotusta X vuotta: 1: kantaja Päätös: -1: kantaja, Vastaaja`); // ..................................... // ..................................... definitions.push(` %% https://mermaid.js.org/syntax/entityRelationshipDiagram.htmlerDiagram profiled-metal-sheet ||--o{ RETAILER : allows profiled-metal-sheet { string id PK string make string model string[] parts } PERSON ||--o{ RETAILER : is PERSON { string driversLicense PK "The license #" string(99) firstName "Only 99 characters are allowed" string lastName string phone UK "Unique Key" int age } RETAILER { string name PK, FK "Primary Key, Foreign Key" string address PK, FK } STEEL-MILL only one to zero or more profiled-metal-sheet : makes `); // ..................................... // ..................................... definitions.push(` %% https://mermaid.js.org/syntax/classDiagram.html%% More info: https://www.kkv.fi/kuluttaja-asiat/kuluttaja-asiamies/#valvontakeinot stateDiagram-v2State0: KuluttajaState0 --> State1 State1: Kuluttaja-asiamies note right of State1 Kuluttaja-asiamies turvaa kuluttajien asemaa<br>ja valvoo useiden kuluttajaa suojaavien lakien<br>noudattamista. end note State1 --> State2 : valvontakeinot note left of State2 : Kuluttaja-asiamiehellä on neuvotteluvelvollisuus.<br> Tämä tarkoittaa sitä, että kuluttaja-asiamiehen<br> on ensisijaisesti saatava yritys luopumaan lainvastaisesta<br>menettelystä neuvotteluiden avulla.State2 : tutkintavaltuuksiin ja seuraamuksiin`); // ..................................... // .....................................}// .....................................// .....................................// Main:// .....................................function setup() { noCanvas(); createCanvas(700,200); noLoop(); let b = createButton("Change"); b.mousePressed(changeDiagram); let saveButton = createButton('Save Content'); saveButton.mousePressed(saveContent); DefineDiagrams(); initializeDiagrams(); showCurrentDiagram();}function draw() { background(220); }// .....................................// functions:// .....................................function initializeDiagrams() { for (let i = 0; i < definitions.length; i++) { diagrams.push(`<pre class="mermaid">${definitions[i]}</pre>`); // note: the same but different: diagrams.push(`<pre class="mermaid">` + definitions[i] + `</pre>`); }}// .....................................// .....................................function showCurrentDiagram() { p5tes = document.getElementById("diagram").innerHTML = diagrams[currentDiagramIndex]; mermaid.init();}// .....................................function drawCanvas() { background(220); // Your p5.js drawing code goes here // Your p5.js drawing code here text(currentDiagramIndex,20,20); }// .....................................function changeDiagram() { currentDiagramIndex = (currentDiagramIndex + 1) % diagrams.length; showCurrentDiagram(); drawCanvas(); // Redraw when shouldRedraw is true}// .....................................function saveContent() { // Use your preferred method to save the content stored in p5tes // For example, you can save it to a file or display it in the console console.log(p5tes); // Or use a library like FileSaver.js to save it to a file // SaveFile(p5tes, 'diagram.html');}//function saveCanvasImage() {// saveCanvas('myCanvas', 'png');//}