@markgrafhq/docusaurus-plugin-markgraf 0.0.26

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mark Eibes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# @markgrafhq/docusaurus-plugin-markgraf
+
+Docusaurus plugin + component for embedding [markgraf](https://github.com/markgrafhq) animations.
+
+## Install
+
+```bash
+npm install @markgrafhq/docusaurus-plugin-markgraf @markgrafhq/markgraf-react
+```
+
+## Configure
+
+```js
+// 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:
+
+```css
+@import "@markgrafhq/markgraf-react/dist/markgraf-react.css";
+```
+
+## Use
+
+Fenced code blocks with the `markgraf` language render as live players:
+
+````markdown
+```markgraf
+seed 1
+keyframe v1 {
+  +node client "Client"
+  +node api    "API"
+  +edge client api
+  client -> api "GET /user/42"
+}
+```
+````
+
+Or use the component directly in MDX:
+
+```mdx
+import { Markgraf } from "@markgrafhq/docusaurus-plugin-markgraf";
+
+<Markgraf src={`seed 1\nkeyframe v1 { +node a "A" }`} />
+```

package/dist/Markgraf.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface MarkgrafProps {
+    src: string;
+    renderer?: "canvas" | "svg";
+    className?: string;
+}
+export default function Markgraf({ src, renderer, className }: MarkgrafProps): React.JSX.Element;

package/dist/Markgraf.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MarkgrafPlayer } from "@markgrafhq/markgraf-react";
+export default function Markgraf({ src, renderer = "canvas", className }) {
+    if (typeof window === "undefined") {
+        return _jsx("div", { className: className, "data-markgraf-placeholder": true });
+    }
+    return (_jsx("div", { className: className, children: _jsx(MarkgrafPlayer, { src: src, renderer: renderer }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import remarkMarkgraf from "./remark-markgraf.mjs";
+export { default as Markgraf } from "./Markgraf.js";
+export default function pluginMarkgraf(): {
+    name: string;
+    configureWebpack(): {
+        resolve: {
+            extensionAlias: {
+                ".js": string[];
+            };
+        };
+    };
+};
+export { remarkMarkgraf };

package/dist/index.js

@@ -0,0 +1,11 @@
+import remarkMarkgraf from "./remark-markgraf.mjs";
+export { default as Markgraf } from "./Markgraf.js";
+export default function pluginMarkgraf() {
+    return {
+        name: "markgraf-docusaurus",
+        configureWebpack() {
+            return { resolve: { extensionAlias: { ".js": [".js", ".ts", ".tsx"] } } };
+        },
+    };
+}
+export { remarkMarkgraf };

package/dist/remark-markgraf.js

@@ -0,0 +1,56 @@
+import { visit } from "unist-util-visit";
+
+const importNode = {
+  type: "mdxjsEsm",
+  value: 'import Markgraf from "@markgrafhq/docusaurus-plugin-markgraf/dist/Markgraf.js";',
+  data: {
+    estree: {
+      type: "Program",
+      sourceType: "module",
+      body: [
+        {
+          type: "ImportDeclaration",
+          specifiers: [
+            {
+              type: "ImportDefaultSpecifier",
+              local: { type: "Identifier", name: "Markgraf" },
+            },
+          ],
+          source: {
+            type: "Literal",
+            value: "@markgrafhq/docusaurus-plugin-markgraf/dist/Markgraf.js",
+            raw: '"@markgrafhq/docusaurus-plugin-markgraf/dist/Markgraf.js"',
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default function remarkMarkgraf() {
+  return (tree) => {
+    let needsImport = false;
+
+    visit(tree, "code", (node, index, parent) => {
+      if (node.lang !== "markgraf" || !parent || index == null) return;
+
+      needsImport = true;
+
+      const src = node.value;
+      parent.children[index] = {
+        type: "mdxJsxFlowElement",
+        name: "Markgraf",
+        attributes: [
+          {
+            type: "mdxJsxAttribute",
+            name: "src",
+            value: src,
+          },
+        ],
+        children: [],
+      };
+    });
+
+    if (needsImport) tree.children.unshift(importNode);
+  };
+}

package/dist/remark-markgraf.mjs

@@ -0,0 +1,56 @@
+import { visit } from "unist-util-visit";
+
+const importNode = {
+  type: "mdxjsEsm",
+  value: 'import Markgraf from "@markgrafhq/docusaurus-plugin-markgraf/dist/Markgraf.js";',
+  data: {
+    estree: {
+      type: "Program",
+      sourceType: "module",
+      body: [
+        {
+          type: "ImportDeclaration",
+          specifiers: [
+            {
+              type: "ImportDefaultSpecifier",
+              local: { type: "Identifier", name: "Markgraf" },
+            },
+          ],
+          source: {
+            type: "Literal",
+            value: "@markgrafhq/docusaurus-plugin-markgraf/dist/Markgraf.js",
+            raw: '"@markgrafhq/docusaurus-plugin-markgraf/dist/Markgraf.js"',
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default function remarkMarkgraf() {
+  return (tree) => {
+    let needsImport = false;
+
+    visit(tree, "code", (node, index, parent) => {
+      if (node.lang !== "markgraf" || !parent || index == null) return;
+
+      needsImport = true;
+
+      const src = node.value;
+      parent.children[index] = {
+        type: "mdxJsxFlowElement",
+        name: "Markgraf",
+        attributes: [
+          {
+            type: "mdxJsxAttribute",
+            name: "src",
+            value: src,
+          },
+        ],
+        children: [],
+      };
+    });
+
+    if (needsImport) tree.children.unshift(importNode);
+  };
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@markgrafhq/docusaurus-plugin-markgraf",
+  "version": "0.0.26",
+  "description": "Docusaurus plugin + component for embedding markgraf animations. Transforms ```markgraf fenced code blocks into a live player and exposes a <Markgraf src=\"…\" /> MDX component.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./remark": {
+      "default": "./dist/remark-markgraf.js"
+    },
+    "./dist/*": "./dist/*",
+    "./css": "./node_modules/@markgrafhq/markgraf-react/dist/markgraf-react.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/remark-markgraf.mjs dist/remark-markgraf.mjs && cp src/remark-markgraf.mjs dist/remark-markgraf.js"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": ">=3",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@markgrafhq/markgraf-react": "^0.0.26",
+    "unist-util-visit": "^5"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "markgraf",
+    "docusaurus",
+    "docusaurus-plugin",
+    "mdx",
+    "remark",
+    "animation",
+    "diagram"
+  ],
+  "license": "MIT",
+  "author": "Mark Eibes <mark.eibes@gmail.com>",
+  "homepage": "https://github.com/markgrafhq/docusaurus-plugin-markgraf#readme",
+  "bugs": "https://github.com/markgrafhq/docusaurus-plugin-markgraf/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/markgrafhq/docusaurus-plugin-markgraf.git"
+  }
+}