remark-local-plantuml
is a simple plugin for remarkjs that converts PlantUML code locally to inline html SVG nodes.
npm install --save @mstroppel/remark-local-plantuml
You can use this plugin like following
# Your markdown including PlantUML code block
```plantuml Your title
class SimplePlantUMLPlugin {
+ transform(syntaxTree: AST): AST
}
### JavaScript
```javascript
const remark = require("remark");
const simplePlantUML = require("@mstroppel/remark-local-plantuml");
const fs = require("fs");
const path = require("path");
const input = fs.readFileSync(path.resolve(__dirname, "./your-markdown.md")).toString();
const output = remark().use(simplePlantUML).processSync(input).toString();
console.log(output);
You can use this plugin in any frameworks that support remarkjs.
If you want to use in the classic preset of Docusaurus 2 or 3, set configuration in your Docusaurus.config.js
like following:
const simplePlantUML = require("@mstroppel/remark-local-plantuml");
// your configurations...
presets: [
[
"@docusaurus/preset-classic",
{
docs: {
sidebarPath: require.resolve("./sidebars.js"),
remarkPlugins: [simplePlantUML]
}
}
]
],
//...
when on npm run start
or npm run build
of Docusaurus the following error appears:
Error: MDX compilation failed for file "C:\data\source\tapio.InternalDocs\docs\context.md"
Cause: Cannot handle unknown node `raw`
Details:
Error: Cannot handle unknown node `raw`
Use the rehype-raw as rehypeplugin
in Docusaurus.
Install rehype-raw
:
npm install rehype-raw
Add the following to the top of docusaurus.config.js
file:
and add the MDX plugin in next to the remark-local-plantuml
plugin:
const localPlantUML = require("@mstroppel/remark-local-plantuml");
import rehypeRaw from 'rehype-raw';
const rehypeRawOptions = {
passThrough: ['mdxjsEsm']
};
// your configurations...
presets: [
[
"@Docusaurus/preset-classic",
{
docs: {
sidebarPath: require.resolve("./sidebars.js"),
remarkPlugins: [localPlantUML],
rehypePlugins: [[rehypeRaw, rehypeRawOptions]],
}
}
]
],
//...
See also the example docusaurus project.