@podlite/diagram

0.0.26 • Public • Published

=Mermaid block

=Mermaid - use diagrams

To render beautiful graphs, sequence and Gantt diagrams and flowcharts, one can use the =Mermaid blocks.

=begin Mermaid
graph LR
        A-->B
        B-->C
        C-->A
        D-->C
=end Mermaid

sample1

Open this example in pod6.in

Flowchart

=Mermaid
graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

Flowchart

Open this example in pod6.in

=Mermaid
graph TD
   A(Coffee machine <br>not working) --> B{Machine has power?}
   B -->|No| H(Plug in and turn on)
   B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
   C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
   D -->|No| F(Send for repair)

Flowchart

Open this example in pod6.in

UML sequence diagram

=Mermaid
sequenceDiagram
    autonumber
    Student->>Admin: Can I enrol this semester?
    loop enrolmentCheck
        Admin->>Admin: Check previous results
    end
    Note right of Admin: Exam results may <br> be delayed
    Admin-->>Student: Enrolment success
    Admin->>Professor: Assign student to tutor
    Professor-->>Admin: Student is assigned

Flowchart

Open this example in pod6.in

UML class diagram

=Mermaid
classDiagram
   Person <|-- Student
   Person <|-- Professor
   Person : +String name
   Person : +String phoneNumber
   Person : +String emailAddress
   Person: +purchaseParkingPass()
   Address "1" <-- "0..1" Person:lives at
   class Student{
      +int studentNumber
      +int averageMark
      +isEligibleToEnrol()
      +getSeminarsTaken()
    }
    class Professor{
      +int salary
    }
    class Address{
      +String street
      +String city
      +String state
      +int postalCode
      +String country
      -validate()
      +outputAsLabel()
    }

Flowchart

Open this example in pod6.in

Gantt diagram

 =Mermaid
 gantt
 title Example Gantt diagram
    dateFormat  YYYY-MM-DD
    section Team 1
    Research & requirements :done, a1, 2021-04-08, 2021-04-10
    Review & documentation : after a1, 20d
    section Team 2
    Implementation      :crit, active, 2021-04-25  , 20d
    Testing      :crit, 20d

Flowchart

Open this example in pod6.in

Contributing

This is an open source program. Feel free to fork and contribute.

In order to keep the match between this documentation and the last release, please contribute and pull requests on the dedicated develop branch.

Useful links

📖 Project site: podlite.org

📌 Github: github.com/podlite 🤩

🖥️ Online editor: pod6.in

🖥️ Desktop editor/viewer: github.com/podlite/podlite-desktop - the viewer and editor of .podlite and .pod6 files for Windows, Linux and Mac.

📚 Podlite for web - static site generator: github.com/podlite/podlite-web

AUTHOR

Copyright (c) 2021-2024 Aliaksandr Zahatski

License

Released under a MIT License.

Dependents (2)

Package Sidebar

Install

npm i @podlite/diagram

Weekly Downloads

8

Version

0.0.26

License

MIT

Unpacked Size

22.4 kB

Total Files

10

Last publish

Collaborators

  • zaggaz