Universal renderer
dgudim1k downloadsRender various diagrams using system native packages
- Overview
- Scorecard
- Updates4
Render various diagrams and generate dynamic svgs in Obsidian. (Similar to Obsidian kroki)
[!Note] This plugin uses system packages for diagram rendering (
jsports 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.jsonto your vault<VaultFolder>/.obsidian/plugins/universal-renderer/from the releases section
Manually
- Clone this repository
npm ioryarnto install dependenciesnpm run build- Copy over
main.js,styles.css,manifest.jsonto 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
- Open
palattegen.ts - Modify
colorsandshadesconstants to your liking (default theme is gruvbox) - Rebuild the plugin
- Delete
styles.css - 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
- open
processors.ts - Modify
presetsconstant to your liking, presets can contain any graph parameters - 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