@markgrafhq/docusaurus-plugin-markgraf

Docusaurus plugin + component for embedding markgraf animations.

Install

npm install @markgrafhq/docusaurus-plugin-markgraf @markgrafhq/markgraf-react

Configure

// docusaurus.config.js
import remarkMarkgraf from "@markgrafhq/docusaurus-plugin-markgraf/remark";

export default {
  presets: [
    [
      "classic",
      {
        docs: { remarkPlugins: [remarkMarkgraf] },
        blog: { remarkPlugins: [remarkMarkgraf] },
      },
    ],
  ],
  plugins: ["@markgrafhq/docusaurus-plugin-markgraf"],
};

Then add the CSS in your custom CSS entry:

@import "@markgrafhq/docusaurus-plugin-markgraf/css";

Use

Fenced code blocks with the markgraf language render as live players:

```markgraf
seed 1
scene v1 {
  + client: Client
  + api: API
  + client -> api
  client ~> api: GET /user/42
}
```

Or use the component directly in MDX:

import { Markgraf } from "@markgrafhq/docusaurus-plugin-markgraf";

<Markgraf src={`seed 1\nscene v1 { + a: A }`} />