From 24171ce8a9bc506e0083d41473477bc9461e0d77 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Fri, 22 Sep 2023 17:26:31 +0800
Subject: [PATCH] website: add mermaid example. (#238)
---
core/README.md | 69 ++++++++++++++++++++++++++++++++++++++++++++
website/package.json | 1 +
2 files changed, 70 insertions(+)
diff --git a/core/README.md b/core/README.md
index 75b1e2fa..9064c71a 100644
--- a/core/README.md
+++ b/core/README.md
@@ -180,6 +180,75 @@ export default function Demo() {
Ignored content
```
+## Support Custom Mermaid Preview
+
+```jsx mdx:preview?background=#fff
+import React, { useState, useRef, useId, useEffect, Fragment, useCallback } from "react";
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { getCodeString } from 'rehype-rewrite';
+import mermaid from "mermaid";
+
+const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
+const Code = ({ inline, children = [], className, ...props }) => {
+ const demoid = useRef(`dome${randomid()}`);
+ const [container, setContainer] = useState(null);
+ const isMermaid = className && /^language-mermaid/.test(className.toLocaleLowerCase());
+ const code = props.node && props.node.children ? getCodeString(props.node.children) : children[0] || '';
+
+ const reRender = async () => {
+ if (container && isMermaid) {
+ try {
+ const str = await mermaid.render(demoid.current, code);
+ container.innerHTML = str.svg;
+ } catch (error) {
+ container.innerHTML = error;
+ }
+ }
+ }
+
+ useEffect(() => {
+ reRender()
+ }, [container, isMermaid, code, demoid]);
+
+ const refElement = useCallback((node) => {
+ if (node !== null) {
+ setContainer(node);
+ }
+ }, []);
+
+ if (isMermaid) {
+ return (
+
+
+
+
+ );
+ }
+ return {children}
;
+};
+
+const source = `
+\`\`\`mermaid
+graph TD;
+ A-->B;
+ A-->C;
+ B-->D;
+ C-->D;
+\`\`\`
+`;
+
+export default function Demo() {
+ return (
+
+ );
+}
+```
+
### Options Props
```typescript
diff --git a/website/package.json b/website/package.json
index 4749cfd7..93716885 100644
--- a/website/package.json
+++ b/website/package.json
@@ -9,6 +9,7 @@
"dependencies": {
"@uiw/react-markdown-preview-example": "^1.5.5",
"@uiw/react-shields": "^1.1.3",
+ "mermaid": "^10.4.0",
"react": "~18.2.0",
"react-dom": "~18.2.0",
"react-router-dom": "^6.8.1"