# Extra Supported Syntax
CodiMD supports many extended syntaxes.
[TOC]
## External Resources Embeded
CodiMD uses **resource embeded syntax** to embed resources.
**resource embeded syntax** is the format of `{%resource id %}`.
Currently CodiMD supports six types of resources: `youtube`, `vimeo`, `gist`, `slideshare`, `speakerdeck`, `pdf`.
### Youtube
Syntax example:
```
{%youtube 1G4isv_Fylg %}
```
Rendered result:
{%youtube 1G4isv_Fylg %}
### Vimeo
Syntax example:
```
{%vimeo 124148255 %}
```
Rendered result:
{%vimeo 124148255 %}
### GitHub Gist
Syntax example:
```
{%gist schacon/4277 %}
```
Rendered result:
{%gist schacon/4277 %}
### SlideShare
Syntax example:
```
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
```
Rendered result:
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
### Speakerdeck
Syntax example:
```
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}
```
Rendered result:
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}
### PDF
syntax example:
```
{%pdf https://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.pdf %}
```
Rendered result:
{%pdf https://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.pdf %}
## Special diagram syntax
CodiMD can draw many different diagrams. By putting the diagram syntax within a code block, and specifying the render engine as code block language, CodiMD will turn these syntaxes into fascinating diagrams! :mage:
### Sequence Diagram
CodiMD uses [js-sequence-diagrams](https://bramp.github.io/js-sequence-diagrams/) to render sequence diagram. Check out its website to learn more about the syntax: https://bramp.github.io/js-sequence-diagrams/
Syntax example:
<pre>
```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?
```
</pre>
Rendered result:
```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?
```
### Flow Chart
CodiMD uses [flowchart.js](https://flowchart.js.org/) to render flow chart.
Check out this website to learn more about the syntax: https://flowchart.js.org/
Syntax example:
<pre>
```flow
st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?
st->op->op2->cond
cond(yes)->e
cond(no)->op2
```
</pre>
Rendered result:
```flow
st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?
st->op->op2->cond
cond(yes)->e
cond(no)->op2
```
### Graphviz
CodiMD uses [viz.js](http://viz-js.com/) to render Grapviz syntax. It uses emscripten to porting graphviz to javascript. Please let us known if you have any issue in using graphviz in CodiMD.
please check graphviz website (http://www.graphviz.org/documentation/) for more example and syntax.
**Syntax Example**
<pre>
```graphviz
digraph hierarchy {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
Headteacher->{Deputy1 Deputy2 BusinessManager}
Deputy1->{Teacher1 Teacher2}
BusinessManager->ITManager
{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
}
```
</pre>
**Render Result**
```graphviz
digraph hierarchy {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
Headteacher->{Deputy1 Deputy2 BusinessManager}
Deputy1->{Teacher1 Teacher2}
BusinessManager->ITManager
{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
}
```
### Mermaid
`Mermaid` is a powerful diagram library, its supports many diagram like `FlowChart`, `Sequence Diagram`, `Class Diagram`, `State Diagram`, `Grantt`, `Pie Chart`.
Please check website for more syntax and example (http://mermaid-js.github.io/mermaid/#/).
**Syntax Example**
<pre>
```mermaid
gantt
title A Gantt Diagram
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
anther task : 24d
```
</pre>
**Render Result**
```mermaid
gantt
title A Gantt Diagram
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
anther task : 24d
```
### abc.js
CodiMD use [abc.js](https://www.abcjs.net/) to support `abc notation`, abc notation is a text-based music notation.
you can check the abcnotation for more syntax and notation explain. (http://abcnotation.com/)
**Syntax Example**
<pre>
```abc
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|"Em"EB{c}BA B2 EB|~B2 AB dBAG|\
"D"FDAD BDAD|FDAD dAFD|
"Em"EBBA B2 EB|B2 AB defg|\
"D"afe^c dBAF|"Em"DEFD E2:|
|:gf|"Em"eB B2 efge|eB B2 gedB|\
"D"A2 FA DAFA|A2 FA defg|
"Em"eB B2 eBgB|eB B2 defg|\
"D"afe^c dBAF|"Em"DEFD E2:|
```
</pre>
**Render Result**
```abc
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|"Em"EB{c}BA B2 EB|~B2 AB dBAG|\
"D"FDAD BDAD|FDAD dAFD|
"Em"EBBA B2 EB|B2 AB defg|\
"D"afe^c dBAF|"Em"DEFD E2:|
|:gf|"Em"eB B2 efge|eB B2 gedB|\
"D"A2 FA DAFA|A2 FA defg|
"Em"eB B2 eBgB|eB B2 defg|\
"D"afe^c dBAF|"Em"DEFD E2:|
```
### Vega-Lite
[Vega-Lite](https://vega.github.io/vega-lite/) is a high-level grammar of interactive graphics. Its support many charts with interactive feature.
You can see more syntax and example in vega-lite documentation (https://vega.github.io/vega-lite/docs/).
<pre>
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
```
</pre>
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
```
### PlantUML
CodiMD use [plantuml-encoder](https://github.com/markushedvall/plantuml-encoder) to support PlantUML, please check the website for more syntax and documentation (https://plantuml.com/en/).
If you want to test syntax, you can use PlantUML online demo server (http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000).
**syntax**
<pre>
```plantuml
start
if (condition A) then (yes)
:Text 1;
elseif (condition B) then (yes)
:Text 2;
stop
elseif (condition C) then (yes)
:Text 3;
elseif (condition D) then (yes)
:Text 4;
else (nothing)
:Text else;
endif
stop
```
</pre>
**result**
:::info
This syntax supported in CodiMD, the render result above is only for demonstration.
:::
### Geo Map
CodiMD use [Nominatim OpenStreetMap](https://nominatim.openstreetmap.org/) to show geographic map.
You can use viewpoint or Latitude and longitude.
**Syntax 1: viewpoint**
You can use [this site](https://nominatim.openstreetmap.org/) to test the viewpoint/address is correctly.
<pre>
```geo
The British Museum
```
</pre>
**Render Result 1**
**Syntax 2: Longitude, Latitude, Scale Factor**
<pre>
```geo
-73.963246,40.779438,17
```
</pre>
**Render Result 2**
:::info
This syntax supported in CodiMD, the render result above is only for demonstration.
:::
### Mindmap
CodiMD uses [markmap-lib](https://markmap.js.org/) to render mindmap.
**syntax**
~~~md
```markmap
# markmap-lib
## Links
- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap-lib)
## Related
- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
## Features
- links
- **inline** ~~text~~ *styles*
- multiline
text
```
~~~
**Render Result**
:::info
This syntax supported in CodiMD, the render result above is only for demonstration.
:::
### Guitar Tab
[Read the complete guide here.](/@codimd/fretboard-syntax)
**Syntax**
~~~md
```fretboard {title="horizontal, 5 frets", type"h6 noNut"}
-oO-*-
--o-o-
-o-oo-
-o-oO-
-oo-o-
-*O-o-
```
~~~
**Render Result**
:::info
This syntax supported in CodiMD, the render result above is only for demonstration.
:::
Sign in with Wallet
Connect another wallet