Creating presentations with Marp and Draw.io in VSCode

productivity Jan 24, 2023

Creating presentations can be a daunting task, but it doesn't have to be. With VSCode, you can make great presentations with the help of Marp and Draw.io. Marp is an open source tool that makes creating presentations easy using markdown, while Draw.io allows you to draw diagrams and insert them into your presentation. We'll go over the basics of creating presentations with Marp and Draw.io in VSCode, so you can make the most of your presentations.

Workflow demo

The following video is a demonstration of my workflow while creating the presentation using Marp.

0:00
/
Marp + Draw.io on vscode demo

Install Marp extension

Search for this extension in your vscode or download from the official store page:

Marp for VS Code - Visual Studio Marketplace
Extension for Visual Studio Code - Create slide deck written in Marp Markdown on VS Code

This is a small and opinionated example:

---
marp: true
theme: uncover
_class: invert
paginate: true
---

<style>
  :root {
    --color-highlight: #EE0000;
    --color-highlight-hover: #aaf;
    --color-highlight-heading: #EE0000;
    --color-header: #bbb;
    --color-header-shadow: transparent;
  }
  h1 {
    font-size: 1.3em;
    color: #EE0000;
  }
  p {
  	text-align: left;
  }
</style>

![bg left:40% 80%](https://www.gravatar.com/avatar/1617e0d1d8ac9ec461c5f215772f7552?s=500&d=mm&r=g)

# **Title here**

Description here! Description here! Description here!

---

# First slide

- Topic 1
- Topic 2
- Topic 3

---

# Add a draw.io diagram

![auto](./diagram.drawio.png)

---

# Add code

```sql
CREATE DATABASE joplin;
CREATE USER joplin WITH PASSWORD 'myPasswordHere';
GRANT ALL PRIVILEGES ON DATABASE joplin TO joplin;
```
presentation.md

The result will be this:

Install Draw.io Integration extension

Search for this extension in your vscode or download from the official store page:

Draw.io Integration - Visual Studio Marketplace
Extension for Visual Studio Code - This unofficial extension integrates Draw.io into VS Code.

Now you will be able to create a new file called anything.drawio.png and be able to:

  • Edit the diagram. Even after rendering the file in the .png format, the diagram still is editable
  • Import the image to any Markdown file, including the Marp presentation
  • Commit this image to remote git repos like GitHub and GitLab

Tags

Luiz Costa

I am a software engineer at Red Hat / Ansible. I love automation tools, games, and coffee. I am also an active contributor to open-source projects on GitHub.