Universal renderer

Render various diagrams and generate dynamic svgs in Obsidian. (Similar to Obsidian kroki)

[!Note] This plugin uses system packages for diagram rendering (js ports are slow, I wanted something native)

Supported diagrams

Diagram	Doc	Codeblock tag
graphviz	graphviz.org	dot
latex	latex-project.org	latex
ditaa	ditaa.sourceforge.net	ditaa
blockdiag	blockdiag.com	blockdiag
asciidoc	asciidoc.org	asciidoc
plantuml	plantuml.com	plantuml
typst	typst.app	typst
d2	d2lang.com	d2
seqdiag	blockdiag.com	seqdiag
actdiag	blockdiag.com	actdiag
nwdiag	blockdiag.com	nwdiag
packetdiag	blockdiag.com	packetdiag
rackdiag	blockdiag.com	rackdiag
wavedrom	wavedrom.com	wavedrom
bytefield	bytefield-svg	bytefield
vega-lite	vega.github.io	vega-lite
vega	vega.github.io	vega
mermaid	mermaid.js.org	mermaid
nomnoml	nomnoml.com	nomnoml
svgbob	svgbob	svgbob
pikchr	pikchr.org	pikchr
gnuplot	gnuplot.info	gnuplot
mscgen	mscgen	mscgen
dbml	dbml.org	dbml
tikz	tikz.dev	tikz

Special diagrams

Diagram	Doc	Codeblock tag
refgraph	refgraph	refgraph
dynamic-svg	dynamic svg	dynamic-svg

Installation

From the community store

Just search for 'Universal renderer' in the obsidian community plugins

From the releases

• Copy over main.js, styles.css, manifest.json to your vault <VaultFolder>/.obsidian/plugins/universal-renderer/ from the releases section

Manually

• Clone this repository
• npm i or yarn to install dependencies
• npm run build
• Copy over main.js, styles.css, manifest.json to your vault <VaultFolder>/.obsidian/plugins/universal-renderer/.
• Install graphviz, latex, mermaid-cli, gnuplot, plantuml, typst, etc... via your system package manager (you can customize executable file locations in plugin settings)

Via BRAT

• Install the BRAT plugin via Community Plugin Search
• Read the docs
• Add https://github.com/dgudim/obsidian-universal-renderer

Usage

• Create a fenced codeblock using one of the diagram types supported by renderer as the language (See a list of supported diagrams)
• Use graph parameters to customize the appearance of the graph
• Specify your diagram code inside the codeblock

Customizing diagram colors

1. Open palattegen.ts
2. Modify colors and shades constants to your liking (default theme is gruvbox)
3. Rebuild the plugin
4. Delete styles.css
5. Reenable the plugin/restart obsidian 2 times

Graph parameters

Various parameters can be specified before the diagram code similar to obsidian's frontmatter

Available parameters

Paramater	Description
width	Width of the rendered graph, can be any css size modifier (%, px, em, etc.)
doc-start	String to prepend to the diagram code before rendering (usefull with presets)
doc-end	Same as doc-start but appends instead of prepending
ref-name graph-name name	Set graph name for reusing it later via a ref graph
preset	A set of parameters to apply to the graph (See presets)
invert-shade invert-color	Inverts shades or colors of the graph
<svg tag>-fill/stroke:keep-shade/color/all	Freezes color or shade inversion in light/dark theme for a specific svg tag (e.g. circle, text, line)
mix-multiplier	How strongly to blend the original diagram color with the matched theme color, from 0 (pure theme color, default) to 1 (see color mixing)
mix-mode	How the blend is computed, either delta (default) or mix (see color mixing)

Example

```
---
invert-shade:1
width:90%
text-fill:keep-shade
---
<diagram code>
```

Color mixing

When a diagram uses a color that isn't part of your theme, the renderer finds the closest theme color and replaces it. By default the original color is fully replaced, but you can use mix-multiplier to bring some of the original color back, and mix-mode controls how it is done.

At mix-multiplier = 0 both modes produce the pure theme color. delta preserves the theme while carrying over the source's relative tint, mix fades theme color to the source color.

```dot
---
mix-multiplier:0.5
mix-mode:delta
---
<diagram code>
```

Presets

By default there is 1 explicit preset defined

Preset	Description
math-graph	Looks good on graphviz graphs with white nodes (sets ellipse and text fill mode to keep-shade)

There are also presets which are applied by default

Preset	Description
default-latex	Applied to all latex graphs, adds some boilerplate start and end code
default-tikz	Applied to all tikz graphs, adds standalone TikZ boilerplate
default-plantuml	Applied to all plantuml graphs, adds @startuml and @enduml to the start and end of the code respectively
default-typst	Applied to all typst graphs, inverts shades for dark mode
default-d2	Applied to all d2 graphs, inverts shades for dark mode and sets width to 100%
default-vega-lite	Applied to all vega-lite graphs, inverts shades for dark mode and sets width to 100%
default-wavedrom	Applied to all wavedrom graphs, inverts shades for dark mode
default-bytefield	Applied to all bytefield graphs, inverts shades for dark mode
default-mermaid	Applied to all mermaid graphs, inverts shades for dark mode and sets width to 100%
default-nomnoml	Applied to all nomnoml graphs, inverts shades for dark mode
default-svgbob	Applied to all svgbob graphs, inverts shades for dark mode
default-pikchr	Applied to all pikchr graphs, inverts shades for dark mode
default-gnuplot	Applied to all gnuplot graphs, inverts shades for dark mode and sets width to 100%
default-mscgen	Applied to all mscgen graphs, inverts shades for dark mode
default-vega	Applied to all vega graphs, inverts shades for dark mode and sets width to 100%
default-dbml	Applied to all dbml graphs, inverts shades for dark mode and sets width to 100%

Defining a preset

1. open processors.ts
2. Modify presets constant to your liking, presets can contain any graph parameters
3. Rebuild the plugin

[!Note] Presets starting with default-<diagram type> will be applied by default to that diagram type

Refgraph

A special diagram type, usefull for reducing code duplication, just displays an already rendered graph

Syntax is as follows:

```refgraph
<graph name>
```

Graph name is set by a name/ref-name/graph-name parameter (See graph parameters)

Dynamic svg

This is not even a graph, the aim of this codeblock is to make your svgs follow the defined color scheme (For example you have a black svg and it looks bad in dark theme)

Syntax and example:

```dynamic-svg
---
invert-shade
width:100%
---
[[file name]]
```

Here we take some svg, make it follow the color scheme (See customizing diagram colors) and invert it's shades (black to white, etc.)

[!Note] This doesn't work well for non-optimized large svgs or with complex svgs