Creating presentations with Marp and Draw.io in VSCode

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.

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

Visual Studio Marketplace

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;
```

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.

Visual Studio Marketplace

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