Gatsby plugin to create Kroki nodes from File nodes with .kroki
extension.
It also downloads the diagram rendered files.
You can create .kroki
files with the following frontmatter:
---
diagramType: plantuml
outputFormat: png
---
diagram content
This plugin will parse these files and create Kroki nodes with the following fields:
- frontmatter
- diagramType: from the frontmatter
- diagramOutputFormat
- diagramContent: only the content of the file without the frontmatter
- encodedContent: kroki encoded file content for GET requests
- krokiURL: URL with the encoded content used to download the diagram
- fileAbsolutePath: path of .kroki file
- localFile: File node with the downloaded diagram
It also will download the diagram into the cache folder and publish it into the public folder.
You can get the public path to insert into pages from the Kroki node localFile.publicURL
field.
npm install --save gatsby-plugin-kroki
or
yarn add gatsby-plugin-kroki
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-kroki",
// Default values for options
options: {
// Kroki server Url used to generate diagrams
krokiEndpoint: "https://kroki.io",
defaultOutputFormat: "svg",
// Only process .kroki files inside this path
path: null,
// Make a copy of the downloaded diagram in the same
// directory of the .kroki file
copyToSrcPath: false,
// Skip diagram download and only create Kroki nodes
skipImageCreation: false,
},
},
],
};
You can use a query like these to get the downloaded image Url:
{
allKroki {
nodes {
krokiURL
localFile {
publicURL
}
parent {
... on File {
relativePath
absolutePath
}
}
}
}
}