Month: March 2017

Using markdown graph in a presentation

using graph in a markdown presentation

Having the ability to simply add graphs in a markdown presentation if one of the reasons why Slidium has been created.

Markdown presentations framework are powerful but you often need to use a third party software to generate graphs and then to copy and paste them as an image in your slides. I do not like this type of work-flow. Each time you need to change a value or a colour of your graph, you need to go again in the other application, regenerate the graph, export it to bitmap, …

Graphs are a powerful feature of Slidium. They are generated in SVG and can be scaled up and down while staying pixel perfect.


  • We call a series a consistent set of data
  • We call data-point a value of a series.
  • Each series has a name and a set of value.
  • They are both separated by a colon :
  • Each value is separated by a coma ,

    Example : Budget: 120, 130, 140

Types of graphs

Slidium supports 6 different types of graphs, adapted to the majority of situations.

  • Line {{line-chart}}
  • Spline {{spline-chart}}
  • Area {{area-chart}}
  • Bar {{bar-chart}}
  • Donut {{donut-chart}}
  • Pie {{pie-chart}}

Line, spline, area and bar charts can be used with multiple values per series. Donut and pie only use a value par series.


For the Y axis, scale and values are defined automatically based on the minimal and maximal values of your data.

For the X axis, you can also let Slidium to calculate them automatically. However in the majority of cases, you will need to provide your own values.

Note: Providing custom X axis value only make sense for graph types supporting multiple values per series.

You can set your own values for a graph by declaring an additional series having x as name: Example:

- Budget: 120, 130, 150
- x: 2015, 2016, 2017
example of spline graph

example of spline graph

Other information about graphs

  • Graphs are generated with a C3js based chart renderer.
  • Each part of the generated SVG graph has CSS classes allowing to customisation from the presentation theme.

Getting started with Slidium Markdown Presentations

This simple tutorial will teach you the basics of Markdown presentations with Slidium. It will guide you through the creation of your first presentation. You also may want to read Basics of presentations which describes the anatomy of a Slidium Markdown Presentation.

Informing theme and other meta data

When creating a new presentation, a new pre-filled document appears. You can change the content of this new file by modifying its template in the application preferences. Because layouts are theme dependent, it is strongly advised to start by informing the theme in your new presentation. Just enter the first letters of its name after the theme: metadata key. A completion popup should appear providing you the list of themes installed in your system.

Adding and removing slides

There are different ways to add or remove slides in a presentation.
  • You can simply add a new slide separator --- in a new line to create a new blank slide. Deleting a slide means to remove the text of the slide in the editor.
  • You can also right click on a slide thumbnail, in the side bar and select the preferred option.

Defining the slide layout

Each slide can have its own layout coming from the theme. You can specify it by setting the following metadata line, at the beginning of the slide. Layout: Cover

Setting a background image

Like the slide layout, you can specify at the slide master data level, the background image of the slide using the Background metadata key. – You can then enter the URL (not the path, it means that it must not contains spaces, …) of the picture. – Note: For metadata, just inform the URL. Do not surround it with the regular markdown syntax for images. – Alternatively, you can drag and drop a picture file from the Finder. – In both cases, because of Sandboxing, you need to allow Slidium to read from the location. If Slidium is not yet granted, it will ask you to do it. background image in markdown presentation

Adding content to your slide

Try to add headers, bullets, quote and use bold text.
# An example of slide
## Subtitle

- Item 1
- Item 2
- Item 3 with **bold text**

For more information about (multi)Markdown, you can use this guide.

Adding a chart

Following Multimarkdown notation, Graphs and diagrams are using the {{}} syntax. donut graph in markdown

Using SVG icons

SVG icons can be inserted like a regular image. When you start entering the first characters (![](...) Slidium will show you the list available SVG icons. You will just have the select the one you wish. Example: ![](si_alarm.svg) SVG icons in markdown presentation

Presenting your first presentation

Once you are satisfied about the result you are getting, you can now move to presentation mode. Here again, you have different options:
  • Go to View -> Present in fullscreen
  • Click on the full screen button of the preview pane.
presenting markdown presentation You can then use the arrow keys to navigate between slides.

Exporting to PDF

You may want to share your presentation with person not having (yet) Slidium. You can easily export your slides to an pixel perfect PDF. To achieve that result, you can click on the export button.
export markdown presentation to pdf

export markdown presentation to pdf

Slidium 0.7 (beta) is now available

I am proud to announce the availability of the first public beta of Slidium, my next generation Markdown Presentation app for Mac.


  • It’s a beta, and even the first one, so be sure you will find issues. Thanks for helping me by reporting them.
  • It only contains a single theme. I have several other ones in progress but none of them were finished enough.
  • Only English. Other localisations will come with future beta.
  • Only mac OS X 10.12 is supported but support for 10.11 is planned too.
  • Documentation is minimalistic but a series of blog post are coming soon to present the main aspects of Slidium. However, I hope that application is simple enough to be used without frequent use of documentation.
In conclusion, a lot of “coming soon” but it should give a good overview of Slidium. Your feedback is really important. Do not hesitate to report issues or features requests. This beta will expires the 3rd of April.
Download 0.7 beta