{"id":22824324,"url":"https://github.com/sango-tech/vue3-mermaid","last_synced_at":"2025-04-23T07:41:55.830Z","repository":{"id":39796968,"uuid":"349129076","full_name":"sango-tech/vue3-mermaid","owner":"sango-tech","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-25T13:16:09.000Z","size":15869,"stargazers_count":1,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T22:51:13.225Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/sango-tech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-18T15:42:20.000Z","updated_at":"2023-07-04T14:57:38.000Z","dependencies_parsed_at":"2022-09-21T02:31:09.368Z","dependency_job_id":null,"html_url":"https://github.com/sango-tech/vue3-mermaid","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sango-tech%2Fvue3-mermaid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sango-tech%2Fvue3-mermaid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sango-tech%2Fvue3-mermaid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sango-tech%2Fvue3-mermaid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sango-tech","download_url":"https://codeload.github.com/sango-tech/vue3-mermaid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250394400,"owners_count":21423360,"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":[],"created_at":"2024-12-12T17:06:14.608Z","updated_at":"2025-04-23T07:41:55.813Z","avatar_url":"https://github.com/sango-tech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue3-mermaid\n\n\u003e 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 vue3-mermaid\n\n```\n\n## Usage\n\n### Register component\n\n```js\nimport Vue3Mermaid from \"vue3-mermaid\";\nVue.use(Vue3Mermaid);\n```\n\n### Use component\n\n```js\nexport default {\n  data: function() {\n    return {\n      data: [\n        {\n          id: \"11\",\n          text: \"A\",\n          link: \"---\",\n          next: [\"2\"],\n          editable: true,\n          style: \"fill:#f9f,stroke:#333,stroke-width:4px\",\n        },\n        { id: \"22\", text: \"B\", edgeType: \"circle\", next: [\"3\"] },\n        { id: \"33\", text: \"C\", next: [\"4\", \"6\"] },\n        { id: \"44\", text: \"D\", link: \"-- This is the text ---\", next: [\"5\"] },\n        { id: \"55\", text: \"E\" },\n        { id: \"66\", 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 --\u003e\", \"-- no --\u003e\"],\n          linkNumber: 1,\n          linkStyle: \"fill:none,stroke:red,stroke-width:1px;\",\n          next: [\"2\", \"3\"],\n          editable: true\n        },\n        { id: \"2\", text: \"B\" },\n        { id: \"3\", text: \"C\"}\n      ],\n```\n\n### Template\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue3-mermaid\n    :nodes=\"data\"\n    type=\"graph LR\"\n    @nodeClick=\"editNode\"\n  \u003e\u003c/vue3-mermaid\u003e\n\u003c/template\u003e\n```\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\", , url: \"http://www.github.com\" }\n      ]\n    };\n  }\n};\n```\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\u003ctemplate\u003e\n  \u003cvue3-mermaid\n    type=\"graph LR\"\n    :config=\"config\"\n  \u003e\u003c/vue3-mermaid\u003e\n\u003c/template\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsango-tech%2Fvue3-mermaid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsango-tech%2Fvue3-mermaid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsango-tech%2Fvue3-mermaid/lists"}