Using Diagrams in a Markdown presentation


Embeding a youtube video in a markdown presentation
A simple sequence diagram, in Slideas

Using Diagrams in a Markdown presentation

When creating a presentation, we often need more than simply adding text and images. This is where Powerpoint, with SmartArt (or Keynote or Google Slides), are very convenient. You can directly from the presentation application, create a diagram.

I wanted to provide the same experience in Slideas, but taking into account the constraints of a Markdown-based presentation application.

The needs

After discussing the topic with several “alpha tester users”, I came with the following list:

  • Simple syntax and Easy to learn: Describing a diagram should be natural. Because Markdown itself does not provide anything for diagrams, we will need to have additional syntax, but it has to remains simple and minimalistic. I hence decided to reuse the Syntax already use for Graphs. Diagrams with then be a “Moustache” header with a hierarchical list. Each item of the diagram will be able to contain the majority of Markdown elements (Emphasis, Headers, images,…)
  • Powerfull: There is no reason to get looking bad diagrams and visualizations. The result must be perfect, on screen or printed. We will then used vector technologies to render the diagrams.
  • Easily them-able: One of the (many!) advantages of Slideas is the support of multiple themes and palets.

Choosing the right technologies

Slideas uses web technologies to render the slides. I am already using D3 with Billboard.js to generate the various types of graphs. Using also D3 for diagrams was then the natural way to go.

D3 will generate SVG that will be styled by CSS. It will allow having per theme and per palet styling.

I started in June to develop a new diagram library and I have now something that answers to all the requirements.

Slideas diagrams in action

Here is how to get the sequence diagram shown above.

# Steps

{{sequence}}
Get Ingredients
Prepare Macaroons
Prepare Filling
Assemble