{"_id":"@carpathian-ninjas/vue-mermaid","_rev":"1-30a797fd4b127030a36c2843bb2505db","name":"@carpathian-ninjas/vue-mermaid","dist-tags":{"latest":"0.0.12"},"versions":{"0.0.12":{"name":"@carpathian-ninjas/vue-mermaid","description":"flowchart of mermaid with vue componet","version":"0.0.12","main":"dist/vue-mermaid.js","author":{"name":"mark_tun","email":"yuguang.liu@foxmail.com"},"contributors":[{"name":"Filipe Pinheiro","email":"filipemcpinheiro@gmail.com"}],"license":"MIT","keywords":["vue","vue-mermaid","vue flowchart","flowchart"],"scripts":{"build":"rollup -c"},"repository":{"type":"git","url":"git+https://github.com/robin1liu/vue-mermaid.git"},"dependencies":{"mermaid":"^8.4.4"},"devDependencies":{"@babel/core":"^7.1.0","@babel/plugin-external-helpers":"^7.0.0","@babel/preset-env":"^7.1.0","rollup":"^0.66.2","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.1.8","rollup-plugin-json":"^3.1.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-uglify-es":"0.0.1","rollup-plugin-vue":"^4.3.2","vue":"^2.5.17","vue-template-compiler":"^2.5.17"},"gitHead":"14a3555d1778e96a7594ca8c127f315cc6f76630","bugs":{"url":"https://github.com/robin1liu/vue-mermaid/issues"},"homepage":"https://github.com/robin1liu/vue-mermaid#readme","_id":"@carpathian-ninjas/vue-mermaid@0.0.12","_nodeVersion":"10.18.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Git7uqdhH2XU4lzkH+Ie4hAPmvA6Mw8qkgTCnup3GSEB47R6/ncPqVhAwB6/kGOKqOXrzF7oJzWQW3xspbYN2w==","shasum":"813f9db808d7dcca19919f96056d705648c69f21","tarball":"https://registry.npmjs.org/@carpathian-ninjas/vue-mermaid/-/vue-mermaid-0.0.12.tgz","fileCount":7,"unpackedSize":25878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee7wGCRA9TVsSAnZWagAAyGYP/2bF6sSHkzISdC64vQQv\nnVvtaIWHrWTL5oCAMCXmA9alt07YNqCu7kJngydaIstL6heaGPfJwWuIfvvk\nAhn1I4CO2LqJ8wy5eq6QnxlNFTD4UmhTyg7UTlCc+Bto6hlZFecHSHZ3eLkw\n4BslLaun6v6JlzgTKl2KZwbrnrI1ma8OM6yLhvDZRbS5XJGRegKH/gtR8Nf2\nudnRkNO4lLmvcZul8Q5HppRphHu0YhxDu1r2cqWe+R2wVfgKQ1gB1ZWW5m+0\ncij8A4q+DvZ0jwwgTvkTKCM1pffPTdA1VZMjAsEjgc+u4AyMP4nfW38ERzCi\nxhznxLyyfRjW3rPEaJjGuU/IprOjSkpiludLVxCzXL9sM4I2JXkkQSq/zryz\nGTJ8q0xHuX2flmfpF6Kts95xPQTF0UiukflgG9ofw8x7jdY+R5D/HELMQT6o\nSUl0QV9QkmrSvC0QbLx4Nz8ZXVyRIiibgEMf13h8E1I2nKh1tuNUqA/OdSV/\n9IXeOdN/t2B2TyNAPL8D+9o9Z/6jVfYiyrgsaeqGwkB5sm3XD2elslqRXDee\n90tXUjdSi7a4nMNThDg/W8CVGZJa2p5XMilVB1QSD4Oel1QPNLFbLp031na5\nS34yyCGBCN7kUCDYqjNq0udi3jCvi9E2ytP3Gby7UxjiO2/142hwlxvrKE0K\nTyqT\r\n=dHfD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ4Bo1HQn1/mv4zeurChMK/4VnFzOrGjGfC7XPxBNcogIhAKG9viYKBpjG144luQ2pAmYjALMv4bUoTm76DnjBaLrM"}]},"maintainers":[{"name":"yarsky","email":"merlyn.tgz@gmail.com"}],"_npmUser":{"name":"yarsky","email":"merlyn.tgz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-mermaid_0.0.12_1585167365817_0.29232164139262196"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-25T20:16:05.577Z","0.0.12":"2020-03-25T20:16:05.933Z","modified":"2022-04-04T21:58:55.690Z"},"maintainers":[{"name":"yarsky","email":"merlyn.tgz@gmail.com"}],"description":"flowchart of mermaid with vue componet","homepage":"https://github.com/robin1liu/vue-mermaid#readme","keywords":["vue","vue-mermaid","vue flowchart","flowchart"],"repository":{"type":"git","url":"git+https://github.com/robin1liu/vue-mermaid.git"},"contributors":[{"name":"Filipe Pinheiro","email":"filipemcpinheiro@gmail.com"}],"author":{"name":"mark_tun","email":"yuguang.liu@foxmail.com"},"bugs":{"url":"https://github.com/robin1liu/vue-mermaid/issues"},"license":"MIT","readme":"# vue-mermaid\n\n> flowchart of mermaid with vue componet\n\n## Requirements\n\n- [Vue.js](https://github.com/vuejs/vue)\n- [mermaid](https://github.com/knsv/mermaid)\n\n## Install Setup\n\n```bash\n# install dependencies\nnpm install --save vue-mermaid\n\n```\n\n## Usage\n\n### Register component\n\n```js\nimport VueMermaid from \"vue-mermaid\";\nVue.use(VueMermaid);\n```\n\n### Use component\n\n```js\nexport default {\n  data: function() {\n    return {\n      data: [\n        {\n          id: \"1\",\n          text: \"A\",\n          link: \"---\",\n          next: [\"2\"],\n          editable: true,\n          style: \"fill:#f9f,stroke:#333,stroke-width:4px\"\n        },\n        { id: \"2\", text: \"B\", edgeType: \"circle\", next: [\"3\"] },\n        { id: \"3\", text: \"C\", next: [\"4\", \"6\"] },\n        { id: \"4\", text: \"D\", link: \"-- This is the text ---\", next: [\"5\"] },\n        { id: \"5\", text: \"E\" },\n        { id: \"6\", text: \"F\" }\n      ]\n    };\n  },\n  methods: {\n    editNode(nodeId) {\n      alert(nodeId);\n    }\n  }\n};\n```\n#### Different link values of next:\n\n```vue\nnodes: [\n        {\n          id: \"1\",\n          text: \"A\",\n          link: [\"-- yes -->\", \"-- no -->\"],\n          next: [\"2\", \"3\"],\n          editable: true\n        },\n        { id: \"2\", text: \"B\" },\n        { id: \"3\", text: \"C\"}\n      ],\n```\n\n![links](./img/links.jpg)\n\n#### Possible edgeType values:\n\n![edge.default](./img/edge_types.png)\n\n### Template\n\n```vue\n<template>\n  <vue-mermaid\n    :nodes=\"data\"\n    type=\"graph LR\"\n    @nodeClick=\"editNode\"\n  ></vue-mermaid>\n</template>\n```\n\n### Result\n\n![Flowchart](./img/flow.png)\n\n### Group Type\n\n```js\nexport default {\n  data: function() {\n    return {\n      data: [\n        {\n          id: \"1\",\n          text: \"A\",\n          link: \"---\",\n          next: [\"2\"],\n          group: \"one\"\n        },\n        { id: \"2\", text: \"B\", edgeType: \"circle\", next: [\"3\"], group: \"one\" },\n        { id: \"3\", text: \"C\", next: [\"4\", \"6\"], group: \"two\" },\n        {\n          id: \"4\",\n          text: \"D\",\n          link: \"-- This is the text ---\",\n          next: [\"5\"],\n          group: \"two\"\n        },\n        { id: \"5\", text: \"E\", group: \"three\" },\n        { id: \"6\", text: \"F\", group: \"three\" }\n      ]\n    };\n  }\n};\n```\n\n![Group](./img/group.png)\n\n### Theme\n\n- To change theme, you can pass in a config object, for available themes, you can refer to [mermaidjs themes](https://github.com/mermaid-js/mermaid/tree/master/src/themes)\n\n```vue\n<template>\n  <vue-mermaid\n    type=\"graph LR\"\n    :config=\"config\"\n  ></vue-mermaid>\n</template>\n```\n\n```js\nexport default {\n  data: function() {\n    return {\n      config: {\n        theme: 'neutral'\n      }\n    };\n  }\n};\n```\n\n\n## Build Setup\n\n```bash\n# install dependencies\nnpm install\n\n# build for production with minification\nnpm run build\n```\n","readmeFilename":"README.md"}