Getting started with Markdown in Diagram Codes Studio
Version 1.0.27 of Diagram Codes Studio includes support for markdown. This opens new possibilities, like images, tables, lists and more in your diagrams.
Let's take a look at how to use Markdown in your diagrams
What is Markdown? #
Markdown is a set of conventions to create rich text.
You use plain text and when the text is processed (rendered)
it will create elements like images, lists, tables etc.
For example, the markdown to create a list of items is:
* item 1
* item 2
* item 3
The markdown to create a table is
| column header | columne header 2|
|john | mary |
For images, markdown has the following convention:
If you want to learn more about Markdown take a look at this tutorial
Including Markdown in Diagram Codes #
MD keyworkd followed by quoted the markdown string , for example:
It's possible to use multiple lines:
# This is a Markdown title
Using local images #
If you want to add an image, place it in the same directory as your diagram (save it first) and add a normal image markdown item
Sub directories are supported - make sure to include the folder name in the image path e.g images/sun.png
# This is the tile
# This is the tile
Remote image URL are also supported
Let's create a diagram with markdown text inside the nodes:
Create a new Tree or Mind Map diagram and save it.
Download the images that you will use. Here we'll use only one image, you can download it from
The diagram code:
cat->MD" ## Traits * skittishness * outgoingness * dominance * spontaneity " cat->MD" ## Some Breeds | name| location| |-----|-------------| | Abyssinian | East Africa | | Aegean | Greece| | Brazilian Shorthair | Brazil | " cat->MD" ![Molly the cat](molly.jpg =200x) Molly the Cat. by Helena Jacoba is licensed under CC BY 2.0 "
Image size can be changed by adding a space followed by
Image with default size: ![Molly the cat](molly.jpg) Image with size 200x200 ![Molly the cat](molly.jpg =200x200) Image with only width defined (height auto) ![Molly the cat](molly.jpg =200)
Common issues #
- If your titles are not rendering, try adding a line break.