1$ md-html-cli example/embed-image.md -e
1![logo/go](img/go.png "go")
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")
Support URL parameter like extended syntax for image size
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)
1#include <stdio.h>
2
3int main(){
4 printf("Hello World!\n");
5 return 0;
6}
1print "Hello World!\n"
1console.log("Hello World!");
1package main
2
3import (
4 "fmt"
5 "os"
6)
7
8func main() {
9 fmt.Fprint(os.Stdout, "Hello World!\n")
10}
1:echo "Hello World!"<CR>
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
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 $$
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 $
```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}
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\)
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} \\ \]
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 |
This feature is enabled with -s/--span
option
1| | |
2|------|------|
3| foo | bar |
4| hoge | fuga |
foo | bar |
hoge | fuga |
1$ md-html-cli example/custom-css.md -c example/css/custom-css.css
wheel
class1<img class="vinyl ep" src="img/go.png">
2<img class="vinyl lp" src="img/go.png">
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 Text Code
: link description code block
. 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.
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:::
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
For more information, please visit: https://d2lang.com/tour/intro/
1x -> y: hello world
1pg: PostgreSQL
2Cloud: my cloud
3Cloud.shape: cloud
4SQLite; Cassandra
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
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
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
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}
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
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}
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]
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;
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)))
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]
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!
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() }
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 --> [*]
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 }
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
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
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
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