{"id":13565723,"url":"https://github.com/show-docs/remark-kroki","last_synced_at":"2025-07-12T16:11:36.283Z","repository":{"id":45597920,"uuid":"473505739","full_name":"show-docs/remark-kroki","owner":"show-docs","description":"Kroki plugin of remark","archived":false,"fork":false,"pushed_at":"2024-07-08T07:13:42.000Z","size":425,"stargazers_count":33,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-10T11:15:50.025Z","etag":null,"topics":["code-block","diagram","doc","document","documentation","docusaurus","kroki","markdown","plantuml","remark","remark-plugin","remarkjs","site-generator"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/show-docs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-24T07:48:29.000Z","updated_at":"2025-06-12T11:15:51.000Z","dependencies_parsed_at":"2022-08-12T11:52:27.410Z","dependency_job_id":"ff665f0a-55ef-40a1-9697-45b0cd399ebe","html_url":"https://github.com/show-docs/remark-kroki","commit_stats":null,"previous_names":["nice-move/remark-kroki"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/show-docs/remark-kroki","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/show-docs%2Fremark-kroki","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/show-docs%2Fremark-kroki/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/show-docs%2Fremark-kroki/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/show-docs%2Fremark-kroki/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/show-docs","download_url":"https://codeload.github.com/show-docs/remark-kroki/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/show-docs%2Fremark-kroki/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265018261,"owners_count":23698647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-block","diagram","doc","document","documentation","docusaurus","kroki","markdown","plantuml","remark","remark-plugin","remarkjs","site-generator"],"created_at":"2024-08-01T13:01:53.979Z","updated_at":"2025-07-12T16:11:36.256Z","avatar_url":"https://github.com/show-docs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# remark-kroki\n\nRemark plugin for showing [Kroki] diagram.\n\n[![npm][npm-badge]][npm-url]\n[![github][github-badge]][github-url]\n![node][node-badge]\n\n[kroki]: https://kroki.io\n[npm-url]: https://www.npmjs.com/package/remark-kroki\n[npm-badge]: https://img.shields.io/npm/v/remark-kroki.svg?style=flat-square\u0026logo=npm\n[github-url]: https://github.com/show-docs/remark-kroki\n[github-badge]: https://img.shields.io/npm/l/remark-kroki.svg?style=flat-square\u0026colorB=blue\u0026logo=github\n[node-badge]: https://img.shields.io/node/v/remark-kroki.svg?style=flat-square\u0026colorB=green\u0026logo=node.js\n\n## Installation\n\n```sh\nnpm install remark-kroki --save-dev\n```\n\n## Usage\n\n```mjs\nimport readFileSync from 'node:fs';\n\nimport { remark } from 'remark';\nimport { remarkKroki } from 'remark-kroki';\n\nconst markdownText = readFileSync('example.md', 'utf8');\n\nremark()\n  .use(remarkKroki, {\n    server: 'http://localhost:8000',\n    alias: ['plantuml']\n  })\n  .process(markdownText)\n  .then((file) =\u003e console.info(file))\n  .catch((error) =\u003e console.warn(error));\n```\n\n### Docusaurus v3 project\n\n```mjs\n// docusaurus.config.mjs\nimport { remarkKroki } from 'remark-kroki';\n\nexport default {\n  presets: [\n    [\n      'classic',\n      {\n        docs: {\n          remarkPlugins: [\n            [\n              remarkKroki,\n              {\n                // ...options here\n                alias: ['plantuml'],\n                target: 'mdx3'\n              }\n            ]\n          ]\n        }\n      }\n    ]\n  ]\n};\n```\n\n### Docusaurus v2 project\n\n```cjs\n// docusaurus.config.js\nmodule.exports = async function createConfig() {\n  const { remarkKroki } = await import('remark-kroki');\n\n  return {\n    presets: [\n      [\n        'classic',\n        {\n          docs: {\n            remarkPlugins: [\n              [\n                remarkKroki,\n                {\n                  // ...options here\n                  alias: ['plantuml']\n                }\n              ]\n            ]\n          }\n        }\n      ]\n    ]\n  };\n};\n```\n\n## Options\n\n### Options.server\n\n- type: string\n- default: http://localhost:8000\n- example: \u003chttps://kroki.io\u003e\n\nUsing self host server by default. Set \u003chttps://kroki.io\u003e to use free service.\n\n### Options.headers\n\n- type: object\n- default: `{}`\n\nHTTP headers to send to the server for custom authentication.\n\n### Options.alias\n\n- type: array\n- default: `[]`\n- example: `['plantuml']`\n\nAlias code language name to treat as kroki code block, meta.type will be ignored.\n\n````\n```kroki type=plantuml\n```\n↓\n\n```plantuml\n```\n````\n\n### Options.target\n\n- type: string\n- default: `'html'`\n- enum: `['html', 'mdx3']`\n\nTransform HTML tags as MDX 3.0 AST or not. When you using Docusaurus v3, you should use `mdx3`.\n\n### Options.output\n\n- type: string\n- default: `'img-base64'`\n- enum: `['inline-svg', 'img-base64', 'img-html-base64', 'object-base64']`\n\nHow to embed SVG as image. See the different and risk on [Best Way To Embed SVG](https://vecta.io/blog/best-way-to-embed-svg).\n\n## Syntax\n\n### Base\n\n````markdown\nTurn\n\n```kroki type=plantuml\n  A --\u003e B\n```\n\nInto\n\n![plantuml](data:image/svg+xml;base64,xxxxxxxx)\n````\n\n````markdown\nTurn\n\n```kroki type=plantuml alt=abc\n  A --\u003e B\n```\n\nInto\n\n![abc](data:image/svg+xml;base64,xxxxxxxx)\n````\n\n### Set classnames\n\n````markdown\n\u003c!--  when Options.output == 'img-html-base64' --\u003e\n\nTurn\n\n```d2 classnames=\"tw-w-1/2\"\nA --\u003e B\n```\n\nInto\n\n\u003cimg classnames=\"tw-w-1/2\" src=\"data:image/svg+xml;base64,xxxxxxxx\" /\u003e\n````\n\n## Troubleshooting\n\nWhen you using `inline-svg` with `mdx3` mode, You may get following error:\n\n```log\nError: Cannot handle unknown node `raw` when using with `@mdx-js/mdx`\n```\n\nYou need to add `rehype-raw` to the complier, for example:\n\n```mjs\n// docusaurus.config.mjs\nimport rehypeRaw from 'rehype-raw';\nimport { remarkKroki } from 'remark-kroki';\n\nexport default {\n  presets: [\n    [\n      'classic',\n      {\n        docs: {\n          remarkPlugins: [\n            [\n              remarkKroki,\n              {\n                // ...options here\n                target: 'mdx3',\n                output: 'inline-svg'\n              }\n            ]\n          ],\n          rehypePlugins: [\n            [\n              rehypeRaw,\n              {\n                passThrough: [\n                  'mdxFlowExpression',\n                  'mdxJsxFlowElement',\n                  'mdxJsxTextElement',\n                  'mdxTextExpression',\n                  'mdxjsEsm'\n                ]\n              }\n            ]\n          ]\n        }\n      }\n    ]\n  ]\n};\n```\n\n## Related\n\n- [markdown-code-block-meta](https://github.com/show-docs/markdown-code-block-meta)\n- [rehype-extended-table](https://github.com/show-docs/rehype-extended-table)\n- [remark-code-example](https://github.com/show-docs/remark-code-example)\n- [remark-docusaurus](https://github.com/show-docs/remark-docusaurus)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshow-docs%2Fremark-kroki","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshow-docs%2Fremark-kroki","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshow-docs%2Fremark-kroki/lists"}