Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/liatemplates/mermaid_template

Template for including mermaidJS graphs into LiaScript
https://github.com/liatemplates/mermaid_template

Last synced: about 15 hours ago
JSON representation

Template for including mermaidJS graphs into LiaScript

Awesome Lists containing this project

README 

        



# mermaid_template



                               --{{0}}--

This is a simple template for including [mermaidJS](https://github.com/knsv/mermaid)

graphs into LiaScript.



* See the mermaid docs [here...](https://mermaidjs.github.io/)

* See the Github version of this document [here...](https://github.com/liaScript/mermaid_template)

* See the LiaScript version of this document [here...](https://liascript.github.io/?https://raw.githubusercontent.com/liaScript/mermaid_template/master/README.md)



To use these macros within your document, simply import it into LiaScript via:



Which will be updated and might come with breaking changes:



`import: https://raw.githubusercontent.com/liaScript/mermaid_template/master/README.md`



or use this specific version and you course will be stable:



`import: https://raw.githubusercontent.com/LiaTemplates/mermaid_template/0.1.4/README.md`



__Overview:__



1. Use plain LiaScript-HTML

2. Use the inline Macro to generate graphs `@mermaid`

3. Use the Block-Macro notation `@mermaid`

4. Dynamically generate graphs `@mermaid_eval`



## Plain - HTML



                              --{{0}}--

If you are on github, you should see some odd looking code here, in contrast to

LiaScript which tries to execute also JavaScript code.



const graphDefinition = `journey

    title My working day

    section Go to work

      Make tea: 5: Me

      Go upstairs: 3: Me

      Do work: 1: Me, Cat

    section Go home

      Go downstairs: 5: Me

      Sit down: 5: Me`;



async function draw () {

    const { svg } = await mermaid.render('graphDiv', graphDefinition);

    send.lia("HTML: "+svg);

    send.lia("LIA: stop")

};



draw()

"LIA: wait"



## Inline



                              --{{0}}--

To simplify the usage of JavaScript libraries, LiaScript allows to define

macros, which allow to inject code during the parsing process. The following

macro, generates exactly the same graph as the previous example.



@mermaid(```flowchart LR

id1(This is the text in the box)```)



## Code-Block



                              --{{0}}--

For more complex examples you can also use the block-code notation, that results

in a nicely rendered code on github, but on LiaScript it is converted to a graph.



```mermaid @mermaid

graph TD

  A-->B

  A-->C

  B-->D

  D-->A

```



```mermaid @mermaid

flowchart TB

    classDef someclass fill:#f96;

    A[Concrete] --> B

    A:::someclass --> C

    C[Language] --> V[Words]

    C --> W[Interaction]

    V --> I[Etymology]

    I --> AD[com lat. = together]

    AD:::someclass --> AK

    I --> AE(cretus lat. = grown)

    AE:::someclass --> AK[grown together]

    AK:::someclass

    

    V --> J[Collocations]

    J --> I

    J --> reinforced:::someclass 

    P --> R[Processes]

    R --> AK

    R --> AP[Inputs & Outputs]

    W --> P[Describing]

    J --> P

    W --> Q[Discussing]

    Q --> AG[Argumentation]

    AG --> AP

    AP --> S[Presentations]

    AP --> AQ[Texts]

    AQ <--> AR[Concept maps]

    S --> AI

    S <--> AR

    

    B[Subject] --> D[Composition]

    D --> N[Aggregate]:::someclass 

    D --> O[Cement]:::someclass 

    B --> E[Production]

    E --> L[Mixing]:::someclass 

    E --> M[Curing]:::someclass 

    B --> F[Structure]

    F --> AA[Homogeneity]:::someclass 

    F --> AB[Porosity]:::someclass 

    B --> G[Properties]

    G --> X[high compressive strength]:::someclass 

    G --> Y[Water resistant]:::someclass 

    B --> H[Applications]

    H --> Z[Dams]:::someclass 

    H --> AC[Furnaces]:::someclass 

    D --> E

    E --> F

    F --> G

    G --> H

    B --> AH

    H --> AH[Impacts]

    AH --> AJ[Economic]:::someclass    

    AH --> AI[Environmental]:::someclass 

    X --> Z

    Y --> Z

```



---



## Interactive



                              --{{0}}--

If you want to have an editable version of mermaid graphs, use the following

example. Simply double-click on the code to edit it and execute it by clicking

on the play-button.



```mermaid

sequenceDiagram

    Alice->>+John: Hello John, how are you?

    Alice->>+John: John, can you hear me?

    John-->>-Alice: Hi Alice, I can hear you!

    John-->>-Alice: I feel great!

```

@mermaid_eval