VSCode for Diagramming and Presentation

Use Visual Studio Code for diagramming and presentation.

VSCode with diagrams.net

Overview

Besides writing code, Visual Studio Code, with the wide range of available extensions, is also a great tool for writing, diagramming, and presentation.

In my previous articles, I described using Vim/Neovim and Emacs for presentation, documentation, and notes taking. In this article, let’s explore using VSCode for diagramming and presentation.

diagrams.net (formerly draw.io)

This is definitely one of my favorite diagramming tools. diagrams.netis a free browser-based end-user diagramming software.

diagrams.net

There is a desktop version available developed in Electron. However, nowadays I normally use it from within VSCode using the unofficial extension.

VSCode with diagrams.net

diagrams.net has everything you need from a professional diagramming tool and is well integrated with cloud storage providers (OneDrive, Google Drive, Dropbox) and platforms like GitHub or GitLab.

Marp: Markdown Presentation Ecosystem

Marp enhances VSCode’s Markdown preview pane to support writing your beautiful presentation.

Create Slide Deck in VSCode using Marp

Since it uses Markdown, it is very easy to get started creating presentation slides.

It also supports additional directives and syntax for images, math typesetting, auto-scaling, and more.

You can display mathematical equations using Pandoc’s Markdown style.

Math Typesetting

You can use Markdown to display images.

Display Image as Background

There are built-in themes and you can easily create and customize your own themes using CSS.

Once you are ready with your slides, you can export them to PDF, HTML, PowerPoint, or JPEG.

Marp Export

vscode-reveal

vscode-reveal let you create and view reveal.js presentations directly from VSCode.

vscode-reveal

Since the presentations are made with reveal.js, anything you can do on the web, you can do in your presentation.

You can change styles using CSS, include an external web page using an <iframe> or add your own custom behavior using reveal.js JavaScript API.

There are also features like nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX support, and syntax highlighted code.

Syntax Highlighting using reveal.js

Once you create your presentation Markdown files, you can export them to PDF or HTML. The HTML presentation slides can then be hosted online for viewing. E.g., you can browse a sample presentation through Github pages here.

Summary

For developers comfortable with code editors like VSCode, Emacs, or Vim/Neovim, there are plugins or extensions available that can help you to do more things besides coding.

Do also check out these articles!

Programmer and occasional blogger.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store