{"id":16222187,"url":"https://github.com/hugodf/docsify-mermaid-10","last_synced_at":"2026-03-18T18:29:30.645Z","repository":{"id":219710012,"uuid":"749705346","full_name":"HugoDF/docsify-mermaid-10","owner":"HugoDF","description":"Example with Docsify and Mermaid 10","archived":false,"fork":false,"pushed_at":"2024-01-29T08:45:44.000Z","size":15,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-29T09:38:07.374Z","etag":null,"topics":["docsify-demo","mermaidjs"],"latest_commit_sha":null,"homepage":"http://example.codewithhugo.com/docsify-mermaid-10/","language":"HTML","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/HugoDF.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":"2024-01-29T08:26:29.000Z","updated_at":"2025-02-26T09:23:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"27d4c240-a2f0-4169-a4dd-148b7837af76","html_url":"https://github.com/HugoDF/docsify-mermaid-10","commit_stats":null,"previous_names":["hugodf/docsify-mermaid-10"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HugoDF/docsify-mermaid-10","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoDF%2Fdocsify-mermaid-10","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoDF%2Fdocsify-mermaid-10/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoDF%2Fdocsify-mermaid-10/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoDF%2Fdocsify-mermaid-10/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HugoDF","download_url":"https://codeload.github.com/HugoDF/docsify-mermaid-10/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HugoDF%2Fdocsify-mermaid-10/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29849796,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T22:37:40.667Z","status":"online","status_checked_at":"2026-02-26T02:00:06.774Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["docsify-demo","mermaidjs"],"created_at":"2024-10-10T12:11:37.437Z","updated_at":"2026-02-26T05:46:27.063Z","avatar_url":"https://github.com/HugoDF.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Docsify Mermaid 10\n\nExample with [Docsify](https://docsify.js.org) and [Mermaid 10](https://mermaid.js.org/).\n\n## Running\n\n- Run `npm install`\n- Run `npm start`\n- Open http://localhost:3000\n\n## The problem\n\n- Docsify doesn't support promises as return value of `markdown.renderer.code`.\n- Mermaid rendering in v9 for `flowchart-elk` is async.\n- Mermaid rendering in v10 for all diagrams is async (`mermaid.render` returns a Promise).\n\n```js\nwindow.$docsify = {\n  markdown: {\n    renderer: {\n      code(code, lang) {\n        if (lang === \"mermaid\") {\n          return mermaid.render(`mermaid-svg`, code).then(({ svg }) =\u003e svg);\n        }\n        return this.origin.code.apply(this, arguments);\n      },\n    },\n  },\n};\n```\n\nRenders\n\n```\n[object Promise]\n```\n\n## The solution\n\n1. Start Mermaid rendering\n2. Docsify will run/render the returned elements (div, MERMAID_CONTAINER element)\n3. Mermaid rendering completes\n4. Our `.then` injects the generated SVG into the `MERMAID_CONTAINER` element\n\n```mermaid\ngantt\n    title Timeline of Docsify vs Mermaid rendering\n    axisFormat .\n    todayMarker off\n    tickInterval 100millisecond\n    section Docsify\n      Run markdown.renderer.code()          : rendercode, 2000, 100ms\n      Render renderer.code() output         : after rendercode, 140ms\n    Section Mermaid\n      Mermaid render()                      : mmd, 2000, 200ms\n      Inject render() output SVG            : after mmd, 90ms\n```\n\n```js\nlet svgCounter = 0;\n\nwindow.$docsify = {\n  markdown: {\n    renderer: {\n      code(code, lang) {\n        if (lang === \"mermaid\") {\n          const svgName = `mermaid-svg-${svgCounter++}`;\n          const MERMAID_CONTAINER_ID = `${svgName}-container`;\n          mermaid.render(svgName, code).then(({ svg }) =\u003e {\n            const containerElement = document.querySelector(\n              `#${MERMAID_CONTAINER_ID}`\n            );\n            if (containerElement) {\n              containerElement.innerHTML = svg;\n            } else {\n              console.error(`Error: #${MERMAID_CONTAINER_ID} not found`);\n            }\n          });\n          return `\u003cdiv class=\"mermaid\" id=\"${MERMAID_CONTAINER_ID}\"\u003e\u003c/div\u003e`;\n        }\n        return this.origin.code.apply(this, arguments);\n      },\n    },\n  },\n};\n```\n\n## Demos\n\n### Flowchart ELK\n\nSuper useful for large diagrams where regular flowcharts get messy with the default dagre (directed graph) rendering engine.\n\n````md\n```mermaid\nflowchart-elk LR\n  A--\u003eB\n  A--\u003eC\n  B--\u003eC\n```\n````\n\n```mermaid\nflowchart-elk LR\n  A--\u003eB\n  A--\u003eC\n  B--\u003eC\n```\n\n### Sequence Diagram\n\n````md\n```mermaid\nsequenceDiagram\n  autonumber;\n  client-\u003e\u003eserver: Request;\n  server--\u003e\u003eclient: Response;\n```\n````\n\n```mermaid\nsequenceDiagram\n  autonumber;\n  client-\u003e\u003eserver: Request;\n  server--\u003e\u003eclient: Response;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugodf%2Fdocsify-mermaid-10","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhugodf%2Fdocsify-mermaid-10","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugodf%2Fdocsify-mermaid-10/lists"}