# markdown
Markdown is a plain text document format created by John Gruber. The purpose of which was a simplified syntax for text-to-HTML conversion. With the Pandoc tool this opened up doors that allowed markdown to be transpiled to several other document formats. Markdown has become a defacto standard in software development for documentation, as popularized by GitHub.
- Reference:
- [Original Specification](https://daringfireball.net/projects/markdown/)
## Syntax
### block quotes
The block quote is created with the `>` syntax
```
> a quote
```
> a quote
For nested levels of block quotes you utilize multiple levels of angle brackets `>>`
```
> Another quote
>> with levels
>>> they can go far
>
>> They can come back
>
> and here's the end
```
> Another quote
>
> > with levels
> >
> > > they can go far
>
> > They can come back
>
> and here's the end
There can also be additional elements contained within thought there may be issues with line breaks between paragraphs in the quotes so you can toss in a quick `<br>` to break the line
```
> #### test
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
> <br>
> - line item
> - another line
> <br>
>
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
```
> #### test
>
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
> <br>
>
> - line item
> - another line
> <br>
>
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
### code formatting
In Markdown inline code can be formatted with backticks \`code\`
`code`
and multi line code can be done with fenced code areas
````
```
Multi
line
code
```
````
when you want to display code inline is one back tick
`` `incline` ``
when you want to show the backticks in formatted code its 2 backticks
``` `` some `code` in line with backticks`` ```
when you want to display a code fenced block including back ticks you sandwich the 3 backtick code fence inside of a 4 backtick fence:
`````
````
```
code fence
```
````
`````
and to keep showing more levels of backtick sandwiches just keep increasing the amount of backticks, the code for the above image is:
![[Pasted_image_20201207031806.png]]
#### RMarkdown
in rmarkdown you can have r code executed inline with the following syntax:
```
`r mean(5,10)`
```
In Rmarkdown the fenced code chunks have a slightly different syntax to allow for control options and meta-processing options:
````
```r{ control_option}
x <- 7
```
````
### font formatting
| Markdown | HTML |
| --------------------- | ---------------------------------------------------------- |
| `**BOLD**` | `<b>BOLD</b> or <strong>BOLD</strong>` |
| `__BOLD__` | `<b>BOLD</b> or <strong>BOLD</strong>` |
| `*Italic*` | `<i>Italic</i> or <em>Italic</em>` |
| `_Italic_` | `<i>Italic</i> or <em>Italic</em>` |
| `__*Bold & Italic*__` | `This text is <strong><em>really important</em></strong>.` |
| `***Bold & Italic***` | `This text is <strong><em>really important</em></strong>.` |
| \``code`\` | `<code>code</code>` |
| `~~Strike Through~~` | `<del>Strike Through</del>` |
| `^super^` | `<sup>super</sup>` |
| `~sub~` | `<sub>sub</sub>` |
| Underline | `<u>underline</u>` |
| `==highlight==` | `<mark>highlight</mark>` |
Strike through is an extended specification feature
super/sub script is an extended specification feature
But they<sup>WORK!</sup>when using inline<sub>HTML</sub> just like <u>underline</u> and <del>strike through</del>
---
- Reference:
- [Strike Through tag has changed a lot](https://www.w3schools.com/tags/tag_strike.asp)
### headings
| Markdown | HTML |
| :--------------------- | :------------------------- |
| # Heading level 1 | `<h1>Heading level 1</h1>` |
| ============== | `<h1>Heading level 1</h1>` |
| ## Heading level 2 | `<h2>Heading level 2</h2>` |
| -------------- | `<h2>Heading level 2</h2>` |
| ### Heading level 3 | `<h3>Heading level 3</h3>` |
| #### Heading level 4 | `<h4>Heading level 4</h4>` |
| ##### Heading level 5 | `<h5>Heading level 5</h5>` |
| ###### Heading level 6 | `<h6>Heading level 6</h6>` |
### horizontal rules
in markdown a horizontal rule is created with three dashes
`---`
in html this is normally `<hr>` which is a self closing tag
These are all examples of valid horizontal rules:
```
---
***
*****
- - -
---------------------------------------
```
### html escape codes
In HTML often times there are special characters you want use but need to "escape" not with a backslash, but with a sequence.
in this example an ampersand: `&` is escaped as `&` and displays as **&**
### links
#### Syntax
Markdown links are created with a pair of square brackets and the URL in the parens: `[Bryans Website](https://www.bryanjenks.dev)`
Explicit links without alternatively displayed text you can paste them directly or within angle brackets:
`https://www.bryanjenks.dev`
or
`<https://www.bryanjenks.dev>`
Links can also link to markdown headings in the same document like a table of contents: spaced must be replaced with dashes but have to begin with a hash:
`[Headings](#Syntax)`
[go to test](#test)
Link text can also be subject to font formatting
such as `**[a bold link](https://www.bryanjenks.dev)**`
These are not footnotes however they function somewhat similarly. you link to a specific identifier, word/number with the definition later defined:
`[test][1]`
```
`[1]: https://www.bryanjenks.dev`
```
spaces in markdown links need to be represented with `%20`
### lists
#### Ordered Lists
ordered lists can be explicitly numbered
```
1. First item
2. Second item
3. Third item
4. Fourth item
```
Or they will be automatically numbered based on order and indentation
```
1. First item
1. Second item
1. Third item
1. Fourth item
```
becomes:
```
1. First item
2. Second item
3. Third item
4. Fourth item
```
Indentation levels reset the counts for each instance of a sublist
1. First item
2. Second item
3. Third item
1. Indented item
2. Indented item
4. Fourth item
Even when unordered the relative links still work correctly
```
1. First item
1. Second item
1. Third item
1. Indented item
1. Indented item
1. Fourth item
```
becomes:
```
1. First item
2. Second item
3. Third item
1. Indented item
2. Indented item
4. Fourth item
```
#### Unordered lists
List items are set with specific characters: `-*+`
The sublevels are only determined only by indentation either 2 spaces or a tab for indenting the levels
- spaces
- two of them
- tabs
- one tab
## Obsidian wiki links
- Internal Links
- `[[Internal Link]]`: links to a file named `Internal Link`
- `[[Internal Link|Hello]]`: Changes display text of the link to `Hello`
- `[[Internal Link#Welcome]]`: Links to an H1 heading in `Internal Link` that says `Welcome`
- `[[Internal Link#Welcome|Hello]]`: Changes display text of the link to `Hello`
- `[[Internal Link#^5e6366]]`: Links to a block in the `Internal Link` document
- `[[Internal Link#^5e6366|Hello]]`: Changes display text of the link to `Hello`
- Transcluded (embedded Links)
- `![[Internal Link]]`: Transcludes a file named `Internal Link`
- `![[Internal Link#Welcome]]`: Transcludes content under the H1 heading in `Internal Link` that says `Welcome`
- `![[Internal Link#^5e6366]]`: Transcludes a block in the `Internal Link` document
- Image Links
- ``: Make an image have a hyperlink
## markdown Lint
- [Repo](https://github.com/DavidAnson/markdownlint#optionsconfig)
- [List of Rules/Aliases](https://github.com/DavidAnson/markdownlint#rules--aliases)
- [configuration](https://github.com/DavidAnson/markdownlint#configuration)
- [sample config file here](https://github.com/github/super-linter/blob/master/TEMPLATES/.markdown-lint.yml)
## images
Images in markdown hijack the links syntax in markdown and prepend a `!` before the link to the image file:
``
if you wanted to link images you wrap the above syntax with another normal link syntax:
`[](Image Link)`
## emojis
in some specifications you can use emojis with double colons `:wave:` this is a common method of inserting emojis such as on Discord, or github markdown.
With UTF support you can now just directly insert emojis onto documents as well: 👋🏻️
in vimwiki the double colon syntax is actually used to indicate tags
## extended functionality
### tables
In markdown the tables are denoted with pipe characters `|`
There is a minimum of 3 rows for a table
1. header names
2. separator
3. data row
| Syntax | Description |
| --------- | ----------- |
| Header | Title |
| Paragraph | Text |
code:
```
| Syntax | Description |
| --------- | ----------- |
| Header | Title |
| Paragraph | Text |
```
---
The separator row has some options
`|:---|`: Align content of this column **Left**
```
| Syntax | Description |
|:--------- |:----------- |
| Header | Title |
| Paragraph | Text |
```
| Syntax | Description |
| :-------- | :---------- |
| Header | Title |
| Paragraph | Text |
---
`|---:|`: Align content of this column **Right**
```
| Syntax | Description |
| ---------:| -----------:|
| Header | Title |
| Paragraph | Text |
```
| Syntax | Description |
| --------: | ----------: |
| Header | Title |
| Paragraph | Text |
---
`|:---:|`: Align content of this column **Center**
```
| Syntax | Description |
|:---------:|:-----------:|
| Header | Title |
| Paragraph | Text |
```
| Syntax | Description |
| :-------: | :---------: |
| Header | Title |
| Paragraph | Text |
Rendering may differ. See 3rd party plugin for Advanced Tables for easy management of markdown tables
Content within the table can contain:
- font-formatting
- images
- links
### definition lists
#### Syntax
```
First Term
: definition
Second Term
: This is one definition of the second term.
: This is another definition of the second term.
```
First Term
: definition
Second Term
: This is one definition of the second term.
: This is another definition of the second term.
The HTML looks like this:
```
<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>
```
It renders like this:
<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>
### fenced code syntax highlighting
for fenced code blocks:
````
```
const string = "hello there"
```
````
we can denote the language of the block and have the contents highlighted based on the language:
````
```javascript
const string = "hello there"
```
````
### footnotes
Footnotes are declared with a single pair of square brackets prepended with a carat: `^[]`
Footnotes are like similar to links with the separation of declaration and definition.
if i declare a footnote`[^1]`
Then the definition can be defined later:
`[^1]: the definition`
What is really helpful is an all in one solution with inline footnotes`^[Through leaving the footnote text in the brackets like this]`
if you have a large block in the footnote definition you can indent sub-levels to make it all part of the same content block:
```
block[^1]
[^1]: this is a text link
indented block
```
block[^1]
[^1]: this is a text link
indented block
In obsidian inside of inline footnotes you can also insert the wiki links in the footnotes themselves`^[[[Like this]]]`
it appears the live viewing mode in obsidian prevents proper functioning of footnotes syntax
### heading ids
#### Syntax
Some Markdown processors support custom heading id's determined by this syntax:
```
### My Great Heading {#custom-id}
```
The HTML looks like this:
```
<h3 id="custom-id">My Great Heading</h3>
```
#### rmarkdown
In Rmarkdown next to the HTML headings you can input additional metadata within braces like this flexdashboard code:
```md
## Page 1 {data-navmenu="Menu A" .hidden}
```
### mathjax
#### Syntax
In markdown you can actually use [[LaTeX|s.m.latex]] Math equations. This is through a [[javascript]] Library called [MathJaX](https://www.mathjax.org/).
Mathjax is also similar to eqn in [[Groff|s.m.groff]].
The basic syntax of LaTeX Math is
`$inline equation
`$\sum\frac{\pi}{\sigma}
$\sum\frac{\pi}{\sigma}$
`$Centered Equations$`
`$\sum\frac{\pi}{\sigma}$`
$\sum\frac{\pi}{\sigma}$
as for the specifics of what equations you're putting into them that's up to you
### task lists
Using the lists feature, tasks are just an additional syntax on top of the list syntax
#### Syntax
```
- an uncompleted task
- [x] a completed task
- an indented uncompleted task
- [x] an indented completed task
```
In some processors completing the parent task to children tasks causes formatting such as strike through on sub items of the completed parent:
- an `uncompleted` task
- [x] a completed task
- THIS IS UNCOMPLETED BUT IT'S PARENT IS COMPLETED
- [x] an indented completed task
---
- Related:
- definition lists
### mermaid diagrams
#### Resources
[mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpXG4gIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICBDIC0tPnxUd298IEVbaVBob25lXVxuICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXVxuXHRcdCIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19)
#### Syntax
Mermaid is one of those [[javascript|javascript]] library additions that can simply hijack the code fence syntax to add new functionality like diagrams.
````
```mermaid
<CODE HERE>
```
````
#### diagram types
##### Class Diagrams
````
```mermaid
%% https://mermaid-js.github.io/mermaid/#/classDiagram
classDiagram
Animal <|-- Duck
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()
}
```
````
```
<div class="mermaid">
%% https://mermaid-js.github.io/mermaid/#/classDiagram
classDiagram
Animal <|-- Duck
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()
}
</div>
```
[mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ)
##### ER Diagram
````
```mermaid
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
````
```
<div class="mermaid">
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
</div>
```
[mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZXJEaWFncmFtXG4gICAgICAgICAgQ1VTVE9NRVIgfXwuLnx7IERFTElWRVJZLUFERFJFU1MgOiBoYXNcbiAgICAgICAgICBDVVNUT01FUiB8fC0tb3sgT1JERVIgOiBwbGFjZXNcbiAgICAgICAgICBDVVNUT01FUiB8fC0tb3sgSU5WT0lDRSA6IFwibGlhYmxlIGZvclwiXG4gICAgICAgICAgREVMSVZFUlktQUREUkVTUyB8fC0tb3sgT1JERVIgOiByZWNlaXZlc1xuICAgICAgICAgIElOVk9JQ0UgfHwtLXx7IE9SREVSIDogY292ZXJzXG4gICAgICAgICAgT1JERVIgfHwtLXx7IE9SREVSLUlURU0gOiBpbmNsdWRlc1xuICAgICAgICAgIFBST0RVQ1QtQ0FURUdPUlkgfHwtLXx7IFBST0RVQ1QgOiBjb250YWluc1xuICAgICAgICAgIFBST0RVQ1QgfHwtLW97IE9SREVSLUlURU0gOiBcIm9yZGVyZWQgaW5cIiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9)
##### FlowChart
````
```mermaid
graph LR
%%==============%%
%% Declarations %%
%%==============%%
A[text]
B[text]
C[text]
%%=========%%
%% Linking %%
%%=========%%
%% comment
A --> B & C
%% subgraph
%% end
class A,B,C internal-link;
style A fill:#EBDBB2,stroke:#EEE,stroke-width:4px,color:#FFF
```
````
```
<div class="mermaid">
graph LR
%%==============%%
%% Declarations %%
%%==============%%
A[text]
B[text]
C[text]
%%=========%%
%% Linking %%
%%=========%%
%% comment
A --> B & C
%% subgraph
%% end
class A,B,C internal-link;
style A fill:#EBDBB2,stroke:#EEE,stroke-width:4px,color:#FFF
</div>
```
[mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgQVtDaHJpc3RtYXNdIC0tPnxHZXQgbW9uZXl8IEIoR28gc2hvcHBpbmcpXG4gIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICBDIC0tPnxUd298IEVbaVBob25lXVxuICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXVxuXHRcdCIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19)
##### Gantt Chart
````
```mermaid
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
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
```
````
```
<div class="mermaid">
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
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
</div>
```
[mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbiAgICB0aXRsZSBBIEdhbnR0IERpYWdyYW1cbiAgICBkYXRlRm9ybWF0ICBZWVlZLU1NLUREXG4gICAgc2VjdGlvbiBTZWN0aW9uXG4gICAgQSB0YXNrICAgICAgICAgICA6YTEsIDIwMTQtMDEtMDEsIDMwZFxuICAgIEFub3RoZXIgdGFzayAgICAgOmFmdGVyIGExICAsIDIwZFxuICAgIHNlY3Rpb24gQW5vdGhlclxuICAgIFRhc2sgaW4gc2VjICAgICAgOjIwMTQtMDEtMTIgICwgMTJkXG4gICAgYW5vdGhlciB0YXNrICAgICAgOiAyNGRcbiAgICAgICAgICAgICIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9)
##### Git Graph
````
```mermaid
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
```
````
```
<div class="mermaid">
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
</div>
```
##### Journey Diagram
````
```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
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
```
````
```
<div class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
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
</div>
```
##### Pie Chart
````
```mermaid
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
````
```
<div class="mermaid">
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
</div>
```
##### Sequence Diagram
````
```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!
```
````
```
<div class="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!
</div>
```
[mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG4gICAgQWxpY2UtPj4rSm9objogSGVsbG8gSm9obiwgaG93IGFyZSB5b3U_XG4gICAgQWxpY2UtPj4rSm9objogSm9obiwgY2FuIHlvdSBoZWFyIG1lP1xuICAgIEpvaG4tLT4-LUFsaWNlOiBIaSBBbGljZSwgSSBjYW4gaGVhciB5b3UhXG4gICAgSm9obi0tPj4tQWxpY2U6IEkgZmVlbCBncmVhdCEiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ)
##### State Diagram
````
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
````
```
<div class="mermaid">
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
</div>
```
[mermaid live editor](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)