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:

![description](ocean.png)

If you want to learn more about Markdown take a look at this tutorial

Including Markdown in Diagram Codes #

Add the MD keyworkd followed by quoted the markdown string , for example:

MD"Content here"

It's possible to use multiple lines:

MD" 

# 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

MD"
# This is the tile

![myimage](happy.png)
"

MD"
# This is the tile

![myimage](images/happy.png)
"

Remote image URL are also supported

Example #

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

https://www.flickr.com/photos/69302634@N02/9885606706

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
"

Notes: #

Image size can be changed by adding a space followed by =widthxheight

 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.

← Home