JSPM

@theguild/remark-mermaid

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 141033
  • Score
    100M100P100Q186601F
  • License MIT

Remark plugin for replacing ```mermaid code blocks with react `<Mermaid />` component

Package Exports

  • @theguild/remark-mermaid
  • @theguild/remark-mermaid/index
  • @theguild/remark-mermaid/mermaid
  • @theguild/remark-mermaid/package.json

Readme

@theguild/remark-mermaid

Created by Dimitri POSTOLOV https://twitter.com/B2o5T.

Maintained by The Guild https://twitter.com/TheGuildDev.

Remark plugin for replacing ```mermaid code blocks with react <Mermaid /> component.

  • Support MDX2

  • Support both dark and light themes. Listening for the dark class on the <html /> element and updating the mermaid's theme accordingly

Install

npm i @theguild/remark-mermaid

Usage

Follow code will be converted to a mermaid diagram.

// my-page.mdx

```mermaid
graph TD;
subgraph AA [Consumers]
A[Mobile app];
B[Web app];
C[Node.js client];
end
subgraph BB [Services]
E[REST API];
F[GraphQL API];
G[SOAP API];
end
Z[GraphQL API];
A --> Z;
B --> Z;
C --> Z;
Z --> E;
Z --> F;
Z --> G;
```