{"id":15416576,"url":"https://github.com/remcohaszing/remark-mermaidjs","last_synced_at":"2025-04-04T09:10:03.497Z","repository":{"id":40681020,"uuid":"339793598","full_name":"remcohaszing/remark-mermaidjs","owner":"remcohaszing","description":"A remark plugin to render mermaid diagrams using playwright","archived":false,"fork":false,"pushed_at":"2024-10-08T19:11:33.000Z","size":2084,"stargazers_count":80,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T08:07:02.302Z","etag":null,"topics":["javascript","mermaid","remark","typescript","unified"],"latest_commit_sha":null,"homepage":"","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/remcohaszing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2021-02-17T16:56:11.000Z","updated_at":"2025-03-03T11:09:15.000Z","dependencies_parsed_at":"2024-10-21T15:59:57.617Z","dependency_job_id":null,"html_url":"https://github.com/remcohaszing/remark-mermaidjs","commit_stats":{"total_commits":111,"total_committers":3,"mean_commits":37.0,"dds":"0.018018018018018056","last_synced_commit":"797be26ef6f9849f11e2e8f9e442603dab7dd954"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fremark-mermaidjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fremark-mermaidjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fremark-mermaidjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/remcohaszing%2Fremark-mermaidjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/remcohaszing","download_url":"https://codeload.github.com/remcohaszing/remark-mermaidjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149505,"owners_count":20891954,"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":["javascript","mermaid","remark","typescript","unified"],"created_at":"2024-10-01T17:12:27.756Z","updated_at":"2025-04-04T09:10:03.473Z","avatar_url":"https://github.com/remcohaszing.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# remark-mermaidjs\n\n[![github actions](https://github.com/remcohaszing/remark-mermaidjs/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/remark-mermaidjs/actions/workflows/ci.yaml)\n[![codecov](https://codecov.io/gh/remcohaszing/remark-mermaidjs/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/remark-mermaidjs)\n[![npm version](https://img.shields.io/npm/v/remark-mermaidjs)](https://www.npmjs.com/package/remark-mermaidjs)\n[![npm downloads](https://img.shields.io/npm/dm/remark-mermaidjs)](https://www.npmjs.com/package/remark-mermaidjs)\n\nA [remark](https://remark.js.org) plugin to render [mermaid](https://mermaid-js.github.io) diagrams\nusing [playwright](https://playwright.dev).\n\n\u003e \\[!IMPORTANT]\n\u003e\n\u003e Use cases for this package are rare. You should probably use\n\u003e [`rehype-mermaid`](https://github.com/remcohaszing/rehype-mermaid) instead.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [`unified().use(remarkMermaid, options?)`](#unifieduseremarkmermaid-options)\n- [Compatibility](#compatibility)\n- [Related Projects](#related-projects)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install remark-mermaidjs\n```\n\nOutside of browsers `remark-mermaidjs` uses [Playwright](https://playwright.dev). If you use this\noutside of a browser, you need to install Playwright and a Playwright browser.\n\n```sh\nnpm install playwright\nnpx playwright install --with-deps chromium\n```\n\nSee the Playwright [Browsers](https://playwright.dev/docs/browsers) documentation for more\ninformation.\n\n## Usage\n\nThis plugin takes all code blocks marked as `mermaid` and renders them as an inline SVG.\n\n```js\nimport { readFile } from 'node:fs/promises'\n\nimport { remark } from 'remark'\nimport remarkMermaid from 'remark-mermaidjs'\n\nconst { value } = await remark()\n  .use(remarkMermaid, {\n    /* Options */\n  })\n  .process(await readFile('readme.md'))\n\nconsole.log(value)\n```\n\n## API\n\nThis package has a default export `remarkMermaid`.\n\n### `unified().use(remarkMermaid, options?)`\n\n#### `browser`\n\nThe Playwright browser to use. (`object`, default: chromium)\n\n#### `css`\n\nA URL that points to a custom CSS file to load. Use this to load custom fonts. This option is\nignored in the browser. You need to include the CSS in your build manually. (`string` | `URL`)\n\n#### `errorFallback`\n\nCreate a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code\nblock is removed. The function receives the following arguments:\n\n- `node`: The mdast `code` node that couldn’t be rendered.\n- `error`: The error message that was thrown.\n- `file`: The file on which the error occurred.\n\n#### `launchOptions`\n\nThe options used to launch the browser. (`object`)\n\n- **Note**: This options is required in Node.js. In the browser this option is unused.\n\n#### `mermaidConfig`\n\nThe [mermaid config](https://mermaid.js.org/config/schema-docs/config.html) to use.\n\n**Note**: This config is only supported in Node.js. In the browser this option is unused. If you use\nthis in a browser, call `mermaid.initialize()` manually.\n\n#### `prefix`\n\nA custom prefix to use for Mermaid IDs. (`string`, default: `mermaid`)\n\n## Compatibility\n\nThis project is compatible with Node.js 18 or greater.\n\n## Related Projects\n\n- [`mermaid`](https://mermaid.js.org) is the library that’s used to render the diagrams.\n- [`mermaid-isomorphic`](https://github.com/remcohaszing/mermaid-isomorphic) allows this package to\n  render Mermaid diagrams in both Node.js and the browser.\n- [`rehype-mermaid`](https://github.com/remcohaszing/rehype-mermaid) is a more powerful plugin that\n  does the same, but as a [rehype](https://github.com/rehypejs/rehype) plugin.\n\n## Contributing\n\nTest fixtures are generated and verified using Linux. Rendering on other platforms may yield\nslightly different results. Don’t worry about adding new fixtures, but don’t update existing ones\nthat cause CI to fail. Furthermore see my global\n[contributing guidelines](https://github.com/remcohaszing/.github/blob/main/CONTRIBUTING.md).\n\n## License\n\n[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fremark-mermaidjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremcohaszing%2Fremark-mermaidjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremcohaszing%2Fremark-mermaidjs/lists"}