Damir's Corner.

Customizing Advanced Slides for Obsidian

I have been using Obsidian as a note-taking tool for some time now, and I am very happy with it. This year I decided to also use it to prepare the slides for my two presentations at the NT conference. The core Slides plugin proved to be too limited for me, so I ended up using the Advanced Slides community plugin, which is based on reveal.js. For the most part, it worked right out of the box. I only had to adjust the styling for the Mermaid diagrams a bit.

By default, the colors used in the diagram did not match the chosen theme and the texts were cut off:

Since the diagrams are rendered as SVG, they can be styled with CSS. And the Advanced Slides plugin provides support for adding custom CSS files to the resulting reveal.js presentation. However, I could not find any documentation on where exactly to put these files.

After some trial and error, I found that they need to be placed in the plugin directory, which is .obsidian/plugins/obsidian-advance-slides in your Obsidian vault folder. This is a great place because the files will sync across all your devices if you use Obsidian Sync.

The css subfolder already had some CSS files in it, so I decided to create my mermaid.css file there as well. To apply it to my presentation, I had to reference it from the frontmatter:

css:
  - css/mermaid.css

The end result was much better:

The corrections I made fall into three categories:

• Enlarge the diagram.
• Use theme colors.
• Prevent text from being cropped.

The end result is not perfect, but it serves its purpose. Here are the contents of my CSS file in case you want to use it yourself or further customize it to your liking:

.reveal .mermaid svg {
  min-width: 100%;
  height: auto;
}

.reveal .mermaid svg .label-container {
  fill: var(--r-background-color) !important;
}

.reveal .mermaid svg .label foreignObject {
  overflow: visible !important;
}

.reveal .mermaid svg .nodeLabel {
  color: var(--r-main-color) !important;
}

.reveal .mermaid svg .edgePaths path {
  stroke: var(--r-main-color) !important;
}

.reveal .mermaid svg marker {
  stroke: var(--r-main-color) !important;
  fill: var(--r-main-color) !important;
}

.reveal .mermaid svg .edgeLabel {
  background-color: var(--r-background-color) !important;
  color: var(--r-main-color) !important;
  font-size: 13px;
}

My presentation in Obsidian turned out great. I probably spent less time customizing the Mermaid diagrams than if I had drawn the same diagram in PowerPoint. And I can now use the same CSS for all my future diagrams, as well as easily translate or otherwise modify the existing diagram.