Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add example and docs link

Browse Source
This commit is contained in:
Aakansha Doshi 2023-08-30 13:21:32 +05:30
parent cef0f15158
commit d3db48e8f4
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/MermaidToExcalidraw.tsx
View File

@ -16,6 +16,8 @@ import { canvasToBlob } from "../data/blob";
import { ArrowRightIcon } from "./icons"; import { ArrowRightIcon } from "./icons";
const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw"; const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
const MERMAID_EXAMPLE =
"flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[test]";
const saveMermaidDataToStorage = (data: string) => { const saveMermaidDataToStorage = (data: string) => {
try { try {
@ -104,11 +106,10 @@ const MermaidToExcalidraw = ({
useEffect(() => { useEffect(() => {
if (!loading) { if (!loading) {
const data = importMermaidDataFromStorage(); const data = importMermaidDataFromStorage() || MERMAID_EXAMPLE;
if (data) {
setText(data); setText(data);
} }
}
}, [loading]); }, [loading]);
useEffect(() => { useEffect(() => {
@ -198,7 +199,10 @@ const MermaidToExcalidraw = ({
style={{ fontSize: "15px", fontStyle: "italic", fontWeight: 500 }} style={{ fontSize: "15px", fontStyle: "italic", fontWeight: 500 }}
> >
Currently only flowcharts are supported. The other types would be Currently only flowcharts are supported. The other types would be
rendered as image in Excalidraw rendered as image in Excalidraw. <br />
Refer to the{" "}
<a href="https://mermaid.js.org/syntax/flowchart.html">docs</a> to
get started.
</span> </span>
</> </>
} }