D2-filter NPM | npm.io

d2-filter

d2-filter is a pandoc filter that adds D2 syntax diagrams in markdown documents.

~~~{.d2 pad=20}
x -> y
~~~

Output

# Installation
npm i -g d2-filter

# Unix
pandoc -F d2-filter test.md -o test.pdf
# Windows
pandoc -F d2-filter.cmd test.md -o test.pdf

If using with Quarto, you can use quarto-d2 to avoid issues with pandoc filters.

Using attributes of the fenced code block, you can specify:

Theme
- Example: {.d2 theme="Grape soda"}.
- Default: 0 or Neutral default
- Values: Run d2 themes for possible options.
Layout engine
- Example: {.d2 layout=elk}.
- Default: dagre
- Values: Run d2 layout for possible options.
Image format
- Example: {.d2 format=png}
- Default: svg
- Values: svg, png, pdf
Sketch
- Example: {.d2 sketch=true}
- Default: false
Image padding
- Example: {.d2 pad=0}
- Default: 100
Folder
- Example: {.d2 folder=img}
- Default: no folder as image is encoded to data URI on img tag
Filename
- Example: {.d2 filename="test"}
- Default: diagram-N
- folder attribute is required to save file locally
Pandoc caption
- Example: {.d2 caption="This is a test image"}
- Default: empty string
Pandoc image attributes
- Example: {.d2 width=30 height=20px}
- Default: empty array
- Values: See pandoc's link_attributes extension
- Note that #id and .class attributes are not supported, but any key-value attributes should work