{"id":20660968,"url":"https://github.com/liatemplates/mermaid_template","last_synced_at":"2026-03-19T17:00:39.066Z","repository":{"id":107256838,"uuid":"124417788","full_name":"LiaTemplates/mermaid_template","owner":"LiaTemplates","description":"Template for including mermaidJS graphs into LiaScript","archived":false,"fork":false,"pushed_at":"2023-10-10T21:31:48.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-19T07:34:07.940Z","etag":null,"topics":["liascript","liascript-template","mermaidjs","oer"],"latest_commit_sha":null,"homepage":"https://LiaScript.github.io/course/?https://raw.githubusercontent.com/liaScript/mermaid_template/master/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaTemplates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-08T16:23:51.000Z","updated_at":"2023-10-13T18:40:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"b2c1e366-816f-440f-bf1e-309b6461afa4","html_url":"https://github.com/LiaTemplates/mermaid_template","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/LiaTemplates/mermaid_template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fmermaid_template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fmermaid_template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fmermaid_template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fmermaid_template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaTemplates","download_url":"https://codeload.github.com/LiaTemplates/mermaid_template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaTemplates%2Fmermaid_template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29589436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T16:55:40.614Z","status":"ssl_error","status_checked_at":"2026-02-18T16:55:37.558Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["liascript","liascript-template","mermaidjs","oer"],"created_at":"2024-11-16T19:06:39.565Z","updated_at":"2026-02-18T18:31:15.419Z","avatar_url":"https://github.com/LiaTemplates.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n\nauthor:   André Dietrich\nemail:    LiaScript@web.de\nversion:  0.1.4\nlanguage: en\nnarrator: US English Female\n\nscript:   https://cdn.jsdelivr.net/npm/mermaid@10.5.0/dist/mermaid.min.js\n\n\n@onload\nmermaid.initialize({ startOnLoad: false });\n@end\n\n@mermaid: @mermaid_(@uid,```@0```)\n\n@mermaid_\n\u003cscript run-once=\"true\" modify=\"false\" style=\"display:block; background: white\"\u003e\nasync function draw () {\n    const graphDefinition = `@1`;\n    const { svg } = await mermaid.render('graphDiv_@0', graphDefinition);\n    send.lia(\"HTML: \"+svg);\n    send.lia(\"LIA: stop\")\n};\n\ndraw()\n\"LIA: wait\"\n\u003c/script\u003e\n@end\n\n@mermaid_eval: @mermaid_eval_(@uid)\n\n@mermaid_eval_\n\u003cscript\u003e\nasync function draw () {\n    const graphDefinition = `@input`;\n    const { svg } = await mermaid.render('graphDiv_@0', graphDefinition);\n    console.html(svg);\n    send.lia(\"LIA: stop\")\n};\n\ndraw()\n\"LIA: wait\"\n\u003c/script\u003e\n@end\n\n--\u003e\n\n# mermaid_template\n\n\n                               --{{0}}--\nThis is a simple template for including [mermaidJS](https://github.com/knsv/mermaid)\ngraphs into LiaScript.\n\n* See the mermaid docs [here...](https://mermaidjs.github.io/)\n* See the Github version of this document [here...](https://github.com/liaScript/mermaid_template)\n* See the LiaScript version of this document [here...](https://liascript.github.io/?https://raw.githubusercontent.com/liaScript/mermaid_template/master/README.md)\n\nTo use these macros within your document, simply import it into LiaScript via:\n\nWhich will be updated and might come with breaking changes:\n\n`import: https://raw.githubusercontent.com/liaScript/mermaid_template/master/README.md`\n\nor use this specific version and you course will be stable:\n\n`import: https://raw.githubusercontent.com/LiaTemplates/mermaid_template/0.1.4/README.md`\n\n\n__Overview:__\n\n1. Use plain LiaScript-HTML\n2. Use the inline Macro to generate graphs `@mermaid`\n3. Use the Block-Macro notation `@mermaid`\n4. Dynamically generate graphs `@mermaid_eval`\n\n## Plain - HTML\n\n                              --{{0}}--\nIf you are on github, you should see some odd looking code here, in contrast to\nLiaScript which tries to execute also JavaScript code.\n\n\u003cscript style=\"display: block; background: white\" run-once=\"true\" modify=\"false\"\u003e\n\nconst graphDefinition = `journey\n    title My working day\n    section Go to work\n      Make tea: 5: Me\n      Go upstairs: 3: Me\n      Do work: 1: Me, Cat\n    section Go home\n      Go downstairs: 5: Me\n      Sit down: 5: Me`;\n\nasync function draw () {\n    const { svg } = await mermaid.render('graphDiv', graphDefinition);\n    send.lia(\"HTML: \"+svg);\n    send.lia(\"LIA: stop\")\n};\n\ndraw()\n\"LIA: wait\"\n\u003c/script\u003e\n\n\n## Inline\n\n                              --{{0}}--\nTo simplify the usage of JavaScript libraries, LiaScript allows to define\nmacros, which allow to inject code during the parsing process. The following\nmacro, generates exactly the same graph as the previous example.\n\n@mermaid(```flowchart LR\nid1(This is the text in the box)```)\n\n\n## Code-Block\n\n                              --{{0}}--\nFor more complex examples you can also use the block-code notation, that results\nin a nicely rendered code on github, but on LiaScript it is converted to a graph.\n\n```mermaid @mermaid\ngraph TD\n  A--\u003eB\n  A--\u003eC\n  B--\u003eD\n  D--\u003eA\n```\n\n```mermaid @mermaid\nflowchart TB\n    classDef someclass fill:#f96;\n    A[Concrete] --\u003e B\n    A:::someclass --\u003e C\n    C[Language] --\u003e V[Words]\n    C --\u003e W[Interaction]\n    V --\u003e I[Etymology]\n    I --\u003e AD[com lat. = together]\n    AD:::someclass --\u003e AK\n    I --\u003e AE(cretus lat. = grown)\n    AE:::someclass --\u003e AK[grown together]\n    AK:::someclass\n    \n    V --\u003e J[Collocations]\n    J --\u003e I\n    J --\u003e reinforced:::someclass \n    P --\u003e R[Processes]\n    R --\u003e AK\n    R --\u003e AP[Inputs \u0026 Outputs]\n    W --\u003e P[Describing]\n    J --\u003e P\n    W --\u003e Q[Discussing]\n    Q --\u003e AG[Argumentation]\n    AG --\u003e AP\n    AP --\u003e S[Presentations]\n    AP --\u003e AQ[Texts]\n    AQ \u003c--\u003e AR[Concept maps]\n    S --\u003e AI\n    S \u003c--\u003e AR\n    \n    B[Subject] --\u003e D[Composition]\n    D --\u003e N[Aggregate]:::someclass \n    D --\u003e O[Cement]:::someclass \n    B --\u003e E[Production]\n    E --\u003e L[Mixing]:::someclass \n    E --\u003e M[Curing]:::someclass \n    B --\u003e F[Structure]\n    F --\u003e AA[Homogeneity]:::someclass \n    F --\u003e AB[Porosity]:::someclass \n    B --\u003e G[Properties]\n    G --\u003e X[high compressive strength]:::someclass \n    G --\u003e Y[Water resistant]:::someclass \n    B --\u003e H[Applications]\n    H --\u003e Z[Dams]:::someclass \n    H --\u003e AC[Furnaces]:::someclass \n    D --\u003e E\n    E --\u003e F\n    F --\u003e G\n    G --\u003e H\n    B --\u003e AH\n    H --\u003e AH[Impacts]\n    AH --\u003e AJ[Economic]:::someclass    \n    AH --\u003e AI[Environmental]:::someclass \n    X --\u003e Z\n    Y --\u003e Z\n```\n\n---\n\n## Interactive\n\n                              --{{0}}--\nIf you want to have an editable version of mermaid graphs, use the following\nexample. Simply double-click on the code to edit it and execute it by clicking\non the play-button.\n\n```mermaid\nsequenceDiagram\n    Alice-\u003e\u003e+John: Hello John, how are you?\n    Alice-\u003e\u003e+John: John, can you hear me?\n    John--\u003e\u003e-Alice: Hi Alice, I can hear you!\n    John--\u003e\u003e-Alice: I feel great!\n```\n@mermaid_eval\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fmermaid_template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliatemplates%2Fmermaid_template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliatemplates%2Fmermaid_template/lists"}