
Product
Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
@binpar/mermaid-filter
Advanced tools
raghur/mermaid-filter
publishes a new version which includes mermaid-v9mermaid-filter
is a pandoc filter that adds support for mermaid syntax diagrams in markdown.
Write your diagrams in fenced code blocks as usual like this:
~~~mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
~~~
and get this in rendered doc
npm install --global mermaid-filter
something.md
into something.html
, use pandoc -t html -F mermaid-filter -o something.html something.md
WINDOWS - you need mermaid-filter.cmd
in the line above
Windows 8.1 - On windows 8.1, mermaid-filter.cmd
fails - apparently due to change in how the CMD.exe works
for subprocesses? - see this issue thread.
You have to edit the globally installed mermaid-filter.cmd
located in c:\users\<username>\AppData\Roaming\npm
to use ~dp$PATH:0
.
Unfortunately, you will need to do this each time you install/update mermaid-filter since it overwrites the cmd file.
You have a couple of formatting options via attributes of the fenced code block to control the rendering
{.mermaid caption="Caption Text Here"}
{.mermaid format=svg}
Default is png{.mermaid width=400}
default width is 800{.mermaid theme=forest}
default is 'default'. Corresponds to --theme
flag of mermaid.cli{.mermaid background=transparent}
default is 'white'. Correponds to --backgroundColor
flag of mermaid.cli{.mermaid filename="file with space"}
to set the filename. This has priority over the caption{.mermaid loc=img}
default loc=inline which will
encode the image in a data uri
scheme.
loc
loc=inline
- default; encode image to data uri on img tag.
loc=imgur
- upload png to imgur and link to it.loc=<anythingelse>
-treat as folder name to place images intoNote that to specify options, you need to use the curly braces syntax and have the .mermaid
class attached.
Admittedly, this is uglier than the earlier syntax on top - but that's how Pandoc wants it.
It's also possible to override global defaults by using environment variables. The name for these environment variables are the same as the attributes prefixed with a MERMAID_FILTER_
so that width
would be MERMAID_FILTER_WIDTH
.
You can also specify an ID to be applied to the rendered image. This may be useful to use pandoc-crossref
or similar packages to reference your diagrams, for example:
```{.mermaid #fig:example}
// Your diagram code here
```
This text has a reference @fig:example which is automatically inserted.
(Note that pandoc-crossref
will automatically find and use the caption=
option. Also note that the order of applying the filters matters - you must apply mermaid-filter
before pandoc-crossref
so that pandoc-crossref
can find the images.)
Mermaid cli allows you to specify additional options in a json configuration file and a css file. mermaid-filter
will look in the current working directory for .mermaid-config.json
and .mermaid.css
and if found, pass them in to
mermaid cli.
Puppeteer Configuration - mermaid-filter
will look in the current working directory for a .puppeteer.json
and pass it
on to mermaid cli (-p
option of mmdc)if found
FAQs
Pandoc filter for mermaid (including mermaid-v9)
We found that @binpar/mermaid-filter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.