\n\n\n\nA Vue.js component that turns a Mermaid string into a diagram.\n\n\nIn contrast to [vue-mermaid](https://github.com/robin1liu/vue-mermaid), which works by passing structured data to it, this component uses the diagram string directly. The advantage is that it always supports the latest language standard and is easier to use if you have an existing diagram. Depends on your use case which fits better.\n\n\n## Install via a package manager\n\n```bash\n# npm\n$ npm install vue-mermaid-string\n\n# Yarn\n$ yarn add vue-mermaid-string\n```\n\nAdd to local components:\n\n```html\n\n```\n\nOr register as a global component:\n\n```js\nimport VueMermaidString from 'vue-mermaid-string'\n\napp.component('VueMermaidString', VueMermaidString)\n```\n\nOr register as a plugin:\n\n```js\nimport VueMermaidString from 'vue-mermaid-string'\n\napp.use(VueMermaidString)\n```\n\n## Install via CDN\n\n```html\n\n\n```\n\n\n## Version compatibility\n\n| vue-mermaid-string | Vue.js |\n|--------------------|--------|\n| >= v4 | v3 |\n| <= v3 | v2 |\n\n## Usage\n\nUsage is simple, you pass a Mermaid string to the component and you get a visual diagram. For ease of use, we will use the [endent](https://github.com/indentjs/endent) package to declare multiline strings. Of course you can also write them using `\\n`.\n\n```html\n\n \n\n```\n\n```js\n\n```\n\n## Mermaid options\n\nIt is possible to customize the diagram by passing options to the component. The options are internally passed to `mermaid.initialize`. See the [default config](https://github.com/mermaid-js/mermaid/blob/5b269348024c031e6d76c5582242ea89a86ebf47/src/defaultConfig.js) for a list of available options.\n\n```html\n\n \n\n```\n\n## Click events\n\nYou can register click events by declaring them in the diagram string. To react to a click event, you need to declare it in the diagram via a `click ` declaration. See [the Mermaid docs](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction) for details.\n\nWhen registering a callback, you do not need to specify the callback name, the component will magically inject it into the diagram by itself. Implement the `node-click` event handler to react to click events:\n\n```html\n\n \n\n```\n\n```js\n\n```\n\nYou can also still implement node links. In this case, the handler won't be called but instead the node will be an `` tag that opens the link on click:\n\n```html\n\n \n\n```\n\n```js\n\n```\n\n## Error handling\n\nMermaid has its own default error handling behavior, outputting a little graphical error message if a parsing error occurs. If you want to have custom error handling, you can react to the `@parse-error` event. Here is a simple example that outputs the error message as a plain string:\n\n```html\n\n
\n \n \n If you want to send me a one time donation. The coffee is pretty good 😊. \n \n \n Also for one time donations if you like PayPal. \n \n \n Here you can support me regularly, which is great so I can steadily work on projects.\n
![\"Linux](\"https://img.shields.io/badge/os-linux%20%7C%C2%A0macos%20%7C%C2%A0windows-blue\"){kind=icon}
\n ![\"Dependency](\"https://img.shields.io/david/dword-design/vue-mermaid-string\")
\n ![\"Renovate](\"https://img.shields.io/badge/renovate-enabled-brightgreen\"){kind=icon}