Embed Image Sample

Command Option

1$ md-html-cli example/embed-image.md -e

Local file is embedded

1![logo/go](img/go.png "go")

logo/go

Write HTML tag immediately

1<img src="img/go.png" width="48">
2<img src="img/go.png" width="32">
3<img src="img/go.png" width="16">
1![google/errors/robot](https://www.google.com/images/errors/robot.png "robot")

google/errors/robot

Extended Image Size Syntax

Support URL parameter like extended syntax for image size

Width & Height

1![logo/go](img/go.png?width=24)
2![logo/go](img/go.png?width=36&height=24)
3![logo/go](img/go.png?width=48&height=24)
4![logo/go](img/go.png?width=24&height=36)
5![logo/go](img/go.png?width=24&height=48)

logo/go logo/go logo/go logo/go logo/go

Syntax Highlight Sample

C

1#include <stdio.h>
2
3int main(){
4    printf("Hello World!\n");
5    return 0;
6}

Ruby

1print "Hello World!\n"

JavaScript

1console.log("Hello World!");

Go

 1package main
 2
 3import (
 4	"fmt"
 5	"os"
 6)
 7
 8func main() {
 9	fmt.Fprint(os.Stdout, "Hello World!\n")
10}

Vim

1:echo "Hello World!"<CR>

Task List Sample

 1* [ ] Some Task 1
 2	* [x] Sub Task 1.1
 3	* [x] Sub Task 1.2
 4	* [ ] Sub Task 1.3
 5	* [ ] Sub Task 1.4
 6* [ ] Some Task 2
 7	* [x] Sub Task 2.1
 8	* [x] Sub Task 2.2
 9	* [ ] Sub Task 2.3
10		* [x] Sub-Sub Task 2.3.1
11		* [ ] Sub-Sub Task 2.3.2
12	* [ ] Sub Task 2.4
13* Some Item 1
14* [x] Some Task 3
15	* [x] Sub Task 3.1
16- Some Item 2
17	- Sub Item 2.1
18		- Sub Item 2.1.1
19- [x] Some Task 4
20	- [x] Sub Task 4.1

MathJax Sample

Example 0

1$$ f(a)=\frac {1} {2 \pi i} \oint_\gamma \frac {f(z)} {z-a} dz $$

$$ f(a)=\frac {1} {2 \pi i} \oint_\gamma \frac {f(z)} {z-a} dz $$

Example 1

1$ \sum_{n = 0}^\infty \frac {f^{(n)}(a)} {n!} (x-a)^n $

$ \sum_{n = 0}^\infty \frac {f^{(n)}(a)} {n!} (x-a)^n $

Example 2

```math
\begin{eqnarray}
e^{j \theta} & = & \cos \theta + j \sin \theta \\
e^{j \pi} & = & -1
\end{eqnarray}
```
1\begin{eqnarray}
2e^{j \theta} & = & \cos \theta + j \sin \theta \\
3e^{j \pi} & = & -1
4\end{eqnarray}

Example 3

1<p>\(
2\left\{
3\begin{eqnarray}
4  x & + & y & = & 8 \\
5  2x & + & 4y & = & 26 \\
6\end{eqnarray}
7\right.
8\)</p>

\( \left\{ \begin{eqnarray} x & + & y & = & 8 \\ 2x & + & 4y & = & 26 \\ \end{eqnarray} \right. \)

1\\(x = 3, y = 5\\)

\(x = 3, y = 5\)

Example 4

1<p>\[
2\\[1em]
3ax^2 + bx + c = 0 \\
4x = \frac {-b \pm \sqrt {b^2 - 4ac}} {2a} \\
5\]</p>

\[ \\[1em] ax^2 + bx + c = 0 \\ x = \frac {-b \pm \sqrt {b^2 - 4ac}} {2a} \\ \]

Table Span Sample

 1|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 |
 2|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
 3| 11 | 21 ¦    ¦    ¦    ¦    ¦    ¦    ¦    |
 4|    | 22 | 32 ¦    ¦    ¦    ¦    ¦    | 92 |
 5|    |    | 33 | 43 ¦    ¦    ¦    | 83 |    |
 6|    |    |    | 44 | 54 ¦    | 74 |    |    |
 7|    |    |    |    | 55 | 65 |    |    |    |
 8|    |    |    |    ¦ 56 |    |    |    |    |
 9|    |    |    ¦    ¦    ¦ 67 |    |    |    |
10|    |    ¦    ¦    ¦    ¦    ¦ 78 |    |    |
11|    ¦    ¦    ¦    ¦    ¦    ¦    ¦ 89 |    |
12
13|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 |
14|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
15|    ¦    ¦    ¦    ¦    ¦    ¦    ¦ 81 | 91 |
16| 12 |    ¦    ¦    ¦    ¦    ¦ 72 | 82 |    |
17|    | 23 |    ¦    ¦    ¦ 63 | 73 |    |    |
18|    |    | 34 |    ¦ 54 | 64 |    |    |    |
19|    |    |    | 45 | 55 |    |    |    |    |
20|    |    |    |    | 56 ¦    |    |    |    |
21|    |    |    | 47 ¦    ¦    ¦    |    |    |
22|    |    | 38 ¦    ¦    ¦    ¦    ¦    |    |
23|    | 29 ¦    ¦    ¦    ¦    ¦    ¦    ¦    |
24
25| № |  1 |  2 |  3 |  4 |
26|:-:|:--:|:--:|:--:|:--:|
27| 1 | 11 ¦    | 31 ¦    |
28| 2 |    ¦    |    ¦    |
29| 3 | 13 ¦    | 33 ¦    |
30| 4 |    ¦    |    ¦    |
31
32| № |  1 |  2 |  3 |  4 |  5 |  6 |
33|:-:|:--:|:--:|:--:|:--:|:--:|:--:|
34| 1 | 11 ¦    ¦    | 41 ¦    ¦    |
35| 2 |    ¦    ¦    |    ¦    ¦    |
36| 3 |    ¦    ¦    |    ¦    ¦    |
37| 4 | 14 ¦    ¦    | 44 ¦    ¦    |
38| 5 |    ¦    ¦    |    ¦    ¦    |
39| 6 |    ¦    ¦    |    ¦    ¦    |
1 2 3 4 5 6 7 8 9
11 21
22 32 92
33 43 83
44 54 74
55 65
56
67
78
89
1 2 3 4 5 6 7 8 9
81 91
12 72 82
23 63 73
34 54 64
45 55
56
47
38
29
1 2 3 4
1 11 31
2
3 13 33
4
1 2 3 4 5 6
1 11 41
2
3
4 14 44
5
6

Table Without Header Sample

This feature is enabled with -s/--span option

1|      |      |
2|------|------|
3| foo  | bar  |
4| hoge | fuga |
foo bar
hoge fuga

Custom CSS Sample

Command Option

1$ md-html-cli example/custom-css.md -c example/css/custom-css.css

wheel

Example for wheel class

1<img class="vinyl ep" src="img/go.png">
2<img class="vinyl lp" src="img/go.png">

Custom CSS for wheel

 1/* example/css/custom-css.css */
 2
 3img.vinyl {
 4    margin: 12px;
 5}
 6
 7img.vinyl.ep {
 8    animation: spin calc(60s / 45) linear infinite;
 9}
10
11img.vinyl.lp {
12    animation: spin calc(60s / (33 + 1 / 3)) linear infinite;
13}
14
15@keyframes spin {
16    from { transform: rotate(0deg);   }
17    to   { transform: rotate(360deg); }
18}

Link Sample

Emoji Sample

 1- :art: - Improve structure / format of the code.
 2- :zap: - Improve performance.
 3- :fire: - Remove code or files.
 4- :bug: - Fix a bug.
 5- :ambulance: - Critical hotfix.
 6- :sparkles: - Introduce new features.
 7- :memo: - Add or update documentation.
 8- :rocket: - Deploy stuff.
 9- :lipstick: - Add or update the UI and style files.
10- :tada: - Begin a project.
11- :white_check_mark: - Add, update, or pass tests.
12- :lock: - Fix security issues.

Fences Divs Sample

 1<style>
 2.green, .yellow { border-radius: 5px; }
 3.green { background-color: #42b983; padding: 15px; }
 4.yellow { background-color: #fdbc40; }
 5#inside-me { color: #fc625d; }
 6</style>
 7
 8:::{.green}
 9## Life Inside Fences
10
11We are now inside a div with the css-class "green". This can be used to style this block
12
13:::{#inside-me .yellow data="important"}
14fences can be nested and given ids as well as classes
15:::
16:::

Life Inside Fences

We are now inside a div with the css-class “green”. This can be used to style this block

fences can be nested and given ids as well as classes

D2 Diagram Sample

For more information, please visit: https://d2lang.com/tour/intro/

D2 Hello World

1x -> y: hello world
xy hello world

D2 Shapes

1pg: PostgreSQL
2Cloud: my cloud
3Cloud.shape: cloud
4SQLite; Cassandra
PostgreSQLmy cloudSQLiteCassandra

D2 Connections

Preview
 1a: The best way to avoid responsibility is to say, "I've got responsibilities"
 2b: Whether weary or unweary, O man, do not rest
 3c: I still maintain the point that designing a monolithic kernel in 1991 is a
 4
 5a -> b: To err is human, to moo bovine {
 6  source-arrowhead: 1
 7  target-arrowhead: * {
 8    shape: diamond
 9  }
10}
11
12b <-> c: "Reality is just a crutch for people who can't handle science fiction" {
13  source-arrowhead.label: 1
14  target-arrowhead: * {
15    shape: diamond
16    style.filled: true
17  }
18}
19
20d: A black cat crossing your path signifies that the animal is going somewhere
21
22d -> a -> c
The best way to avoid responsibility is to say, "I've got responsibilities"Whether weary or unweary, O man, do not restI still maintain the point that designing a monolithic kernel in 1991 is aA black cat crossing your path signifies that the animal is going somewhere To err is human, to moo bovine1* Reality is just a crutch for people who can't handle science fiction1*

D2 Containers

Preview
 1clouds: {
 2  aws: AWS {
 3    load_balancer -> api
 4    api -> db
 5  }
 6  gcloud: Google Cloud {
 7    auth -> db
 8  }
 9
10  gcloud -> aws
11}
12
13users -> clouds.aws.load_balancer
14users -> clouds.gcloud.auth
15
16ci.deploys -> clouds
cloudsusersciAWSGoogle Clouddeploysload_balancerapidbauthdb

D2 Icons

Preview
 1server: {
 2  shape: image
 3  icon: https://icons.terrastruct.com/tech/022-server.svg
 4}
 5
 6github: {
 7  shape: image
 8  icon: https://icons.terrastruct.com/dev/github.svg
 9}
10
11server -> github
servergithub

D2 SQL Tables

Preview
 1cloud: {
 2  disks: {
 3    shape: sql_table
 4    id: int {constraint: primary_key}
 5  }
 6  blocks: {
 7    shape: sql_table
 8    id: int {constraint: primary_key}
 9    disk: int {constraint: foreign_key}
10    blob: blob
11  }
12  blocks.disk -> disks.id
13
14  AWS S3 Vancouver -> disks
15}
clouddisksidintPKblocksidintPKdiskintFKblobAWS S3 Vancouver

D2 Classes

Preview
 1D2 Parser: {
 2  shape: class
 3
 4  # Default visibility is + so no need to specify.
 5  +reader: io.RuneReader
 6  readerPos: d2ast.Position
 7
 8  # Private field.
 9  -lookahead: "[]rune"
10
11  # Protected field.
12  # We have to escape the # to prevent the line from being parsed as a comment.
13  \#lookaheadPos: d2ast.Position
14
15  +peek(): (r rune, eof bool)
16  rewind()
17  commit()
18
19  \#peekn(n int): (s string, eof bool)
20}
21
22"github.com/terrastruct/d2parser.git" -> D2 Parser
D2 Parser+readerio.RuneReader+readerPosd2ast.Position-lookahead[]rune#lookaheadPosd2ast.Position+peek()(r rune, eof bool)+rewind()void+commit()void#peekn(n int)(s string, eof bool)github.com/terrastruct/d2parser.git

D2 Sequence Diagrams

Preview
 1direction: right
 2Before and after becoming friends: {
 3  2007: Office chatter in 2007 {
 4    shape: sequence_diagram
 5    alice: Alice
 6    bob: Bobby
 7    awkward small talk: {
 8      alice -> bob: uhm, hi
 9      bob -> alice: oh, hello
10      icebreaker attempt: {
11        alice -> bob: what did you have for lunch?
12      }
13      unfortunate outcome: {
14        bob -> alice: that's personal
15      }
16    }
17  }
18
19  2012: Office chatter in 2012 {
20    shape: sequence_diagram
21    alice: Alice
22    bob: Bobby
23    alice -> bob: Want to play with ChatGPT?
24    bob -> alice: Yes!
25    bob -> alice.play: Write a play...
26    alice.play -> bob.play: about 2 friends...
27    bob.play -> alice.play: who find love...
28    alice.play -> bob.play: in a sequence diagram
29  }
30
31  2007 -> 2012: Five\nyears\nlater
32}
Before and after becoming friendsOffice chatter in 2007Office chatter in 2012AliceBobbyAliceBobby Fiveyearslaterawkward small talkicebreaker attemptunfortunate outcome uhm, hi oh, hello what did you have for lunch? that's personal Want to play with ChatGPT? Yes! Write a play... about 2 friends... who find love... in a sequence diagram

Mermaid Diagram Sample

For more information, please visit: https://mermaid.js.org/intro/

1```mermaid
2---
3title: Node with text
4---
5flowchart LR
6    id1[This is the text in the box]
7```
---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

Mermaid Graph

1```mermaid
2graph TD;
3    A-->B;
4    A-->C;
5    B-->D;
6    C-->D;
7```
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Mermaid Flowcharts

Mermaid Node shapes

Preview
1```mermaid
2flowchart LR
3    id1(This is the text in the box)
4```
flowchart LR
    id1(This is the text in the box)
1```mermaid
2flowchart LR
3    id1([This is the text in the box])
4```
flowchart LR
    id1([This is the text in the box])
1```mermaid
2flowchart LR
3    id1[[This is the text in the box]]
4```
flowchart LR
    id1[[This is the text in the box]]
1```mermaid
2flowchart LR
3    id1[(Database)]
4```
flowchart LR
    id1[(Database)]
1```mermaid
2flowchart LR
3    id1((This is the text in the circle))
4```
flowchart LR
    id1((This is the text in the circle))
1```mermaid
2flowchart LR
3    id1>This is the text in the box]
4```
flowchart LR
    id1>This is the text in the box]
1```mermaid
2flowchart LR
3    id1{This is the text in the box}
4```
flowchart LR
    id1{This is the text in the box}
1```mermaid
2flowchart LR
3    id1{{This is the text in the box}}
4```
flowchart LR
    id1{{This is the text in the box}}
1```mermaid
2flowchart TD
3    id1[/This is the text in the box/]
4
5```
flowchart TD
    id1[/This is the text in the box/]
1```mermaid
2flowchart TD
3    id1[\This is the text in the box\]
4```
flowchart TD
    id1[\This is the text in the box\]
1```mermaid
2flowchart TD
3    A[/Christmas\]
4```
flowchart TD
    A[/Christmas\]
1```mermaid
2flowchart TD
3    B[\Go shopping/]
4```
flowchart TD
    B[\Go shopping/]
1```mermaid
2flowchart TD
3    id1(((This is the text in the circle)))
4```
flowchart TD
    id1(((This is the text in the circle)))
Preview
1```mermaid
2flowchart LR
3    A-->B
4```
flowchart LR
    A-->B
1```mermaid
2flowchart LR
3    A --- B
4```
flowchart LR
    A --- B
1```mermaid
2flowchart LR
3A-- This is the text! ---B
4```
flowchart LR
A-- This is the text! ---B
1```mermaid
2flowchart LR
3    A---|This is the text|B
4```
flowchart LR
    A---|This is the text|B
1```mermaid
2flowchart LR
3    A-->|text|B
4```
flowchart LR
    A-->|text|B
1```mermaid
2flowchart LR
3    A-- text -->B
4```
flowchart LR
    A-- text -->B
1```mermaid
2flowchart LR
3   A-.->B;
4```
flowchart LR
   A-.->B;
1```mermaid
2flowchart LR
3   A-. text .-> B
4```
flowchart LR
   A-. text .-> B
1```mermaid
2flowchart LR
3   A ==> B
4```
flowchart LR
   A ==> B
1```mermaid
2flowchart LR
3   A == text ==> B
4```
flowchart LR
   A == text ==> B
1```mermaid
2flowchart LR
3   A -- text --> B -- text2 --> C
4```
flowchart LR
   A -- text --> B -- text2 --> C
1```mermaid
2flowchart LR
3   a --> b & c--> d
4```
flowchart LR
   a --> b & c--> d
1```mermaid
2flowchart TB
3    A & B--> C & D
4```
flowchart TB
    A & B--> C & D
1```mermaid
2flowchart TB
3    A --> C
4    A --> D
5    B --> C
6    B --> D
7```
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
1```mermaid
2flowchart LR
3    A --o B
4    B --x C
5```
flowchart LR
    A --o B
    B --x C
1```mermaid
2flowchart LR
3    A o--o B
4    B <--> C
5    C x--x D
6```
flowchart LR
    A o--o B
    B <--> C
    C x--x D
1```mermaid
2flowchart TD
3    A[Start] --> B{Is it?}
4    B -->|Yes| C[OK]
5    C --> D[Rethink]
6    D --> B
7    B ---->|No| E[End]
8```
flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
1```mermaid
2flowchart TD
3    A[Start] --> B{Is it?}
4    B -- Yes --> C[OK]
5    C --> D[Rethink]
6    D --> B
7    B -- No ----> E[End]
8```
flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

Mermaid Sequence Diagram

Preview
1```mermaid
2sequenceDiagram
3    Alice->>John: Hello John, how are you?
4    John-->>Alice: Great!
5    Alice-)John: See you later!
6```
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

Mermaid Class Diagram

Preview
 1```mermaid
 2---
 3title: Animal example
 4---
 5classDiagram
 6    note "From Duck till Zebra"
 7    Animal <|-- Duck
 8    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
 9    Animal <|-- Fish
10    Animal <|-- Zebra
11    Animal : +int age
12    Animal : +String gender
13    Animal: +isMammal()
14    Animal: +mate()
15    class Duck{
16        +String beakColor
17        +swim()
18        +quack()
19    }
20    class Fish{
21        -int sizeInFeet
22        -canEat()
23    }
24    class Zebra{
25        +bool is_wild
26        +run()
27    }
28```
---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

Mermaid State Diagram

Preview
 1```mermaid
 2   stateDiagram-v2
 3    state fork_state <<fork>>
 4      [*] --> fork_state
 5      fork_state --> State2
 6      fork_state --> State3
 7
 8      state join_state <<join>>
 9      State2 --> join_state
10      State3 --> join_state
11      join_state --> State4
12      State4 --> [*]
13```
   stateDiagram-v2
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

Mermaid Entity Relationship Diagram

Preview
 1```mermaid
 2erDiagram
 3    CAR ||--o{ NAMED-DRIVER : allows
 4    CAR {
 5        string registrationNumber
 6        string make
 7        string model
 8    }
 9    PERSON ||--o{ NAMED-DRIVER : is
10    PERSON {
11        string firstName
12        string lastName
13        int age
14    }
15```
erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

Mermaid User Journey Diagram

Preview
 1```mermaid
 2journey
 3    title My working day
 4    section Go to work
 5      Make tea: 5: Me
 6      Go upstairs: 3: Me
 7      Do work: 1: Me, Cat
 8    section Go home
 9      Go downstairs: 5: Me
10      Sit down: 5: Me
11```
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

Mermaid Gantt Diagram

Preview
 1```mermaid
 2gantt
 3    dateFormat  YYYY-MM-DD
 4    title       Adding GANTT diagram functionality to mermaid
 5    excludes    weekends
 6    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
 7
 8    section A section
 9    Completed task            :done,    des1, 2014-01-06,2014-01-08
10    Active task               :active,  des2, 2014-01-09, 3d
11    Future task               :         des3, after des2, 5d
12    Future task2              :         des4, after des3, 5d
13
14    section Critical tasks
15    Completed task in the critical line :crit, done, 2014-01-06,24h
16    Implement parser and jison          :crit, done, after des1, 2d
17    Create tests for parser             :crit, active, 3d
18    Future task in critical line        :crit, 5d
19    Create tests for renderer           :2d
20    Add to mermaid                      :1d
21    Functionality added                 :milestone, 2014-01-25, 0d
22
23    section Documentation
24    Describe gantt syntax               :active, a1, after des1, 3d
25    Add gantt diagram to demo page      :after a1  , 20h
26    Add another diagram to demo page    :doc1, after a1  , 48h
27
28    section Last section
29    Describe gantt syntax               :after doc1, 3d
30    Add gantt diagram to demo page      :20h
31    Add another diagram to demo page    :48h
32```
gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

Mermaid Pie chart Diagram

Preview
1```mermaid
2pie showData
3    title Key elements in Product X
4    "Calcium" : 42.96
5    "Potassium" : 50.05
6    "Magnesium" : 10.01
7    "Iron" :  5
8```
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

Mermaid Requirement Diagram

Preview
 1```mermaid
 2    requirementDiagram
 3
 4    requirement test_req {
 5    id: 1
 6    text: the test text.
 7    risk: high
 8    verifymethod: test
 9    }
10
11    functionalRequirement test_req2 {
12    id: 1.1
13    text: the second test text.
14    risk: low
15    verifymethod: inspection
16    }
17
18    performanceRequirement test_req3 {
19    id: 1.2
20    text: the third test text.
21    risk: medium
22    verifymethod: demonstration
23    }
24
25    interfaceRequirement test_req4 {
26    id: 1.2.1
27    text: the fourth test text.
28    risk: medium
29    verifymethod: analysis
30    }
31
32    physicalRequirement test_req5 {
33    id: 1.2.2
34    text: the fifth test text.
35    risk: medium
36    verifymethod: analysis
37    }
38
39    designConstraint test_req6 {
40    id: 1.2.3
41    text: the sixth test text.
42    risk: medium
43    verifymethod: analysis
44    }
45
46    element test_entity {
47    type: simulation
48    }
49
50    element test_entity2 {
51    type: word doc
52    docRef: reqs/test_entity
53    }
54
55    element test_entity3 {
56    type: "test suite"
57    docRef: github.com/all_the_tests
58    }
59
60
61    test_entity - satisfies -> test_req2
62    test_req - traces -> test_req2
63    test_req - contains -> test_req3
64    test_req3 - contains -> test_req4
65    test_req4 - derives -> test_req5
66    test_req5 - refines -> test_req6
67    test_entity3 - verifies -> test_req5
68    test_req <- copies - test_entity2
69```
    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

Available under the MIT license. Free for commercial and non-commercial use.

Copyright © 2023-present iTanken