meraid的memo

首先安装mermaid和antd，即可复制下面代码在react中实现demo效果

import React from 'react'
import {Input} from 'antd'
import mermaid from "mermaid";
const {TextArea} =Input

export default function Mermaid() {
const [text,setText] = React.useState(`    
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
`)

async function textChange (e){
   setText(e.target.value)
   const element = document.querySelector('#graphDiv');
    const { svg } = await mermaid.render('mermaid', e.target.value);
    element.innerHTML = svg
    console.log(svg);
    await mermaid.run();
};
  React.useEffect(()=>{
     mermaid.contentLoaded()
  },[])
  return (
    <div >
      <TextArea 
      autoSize
      value={text}
      onChange={textChange}/>
    <pre  className="mermaid" id="graphDiv" >
            {text}
    </pre>
    </div>
  );
}

效果展示：输入即可生产时序图

文档：https://mermaid.js.org/syntax/examples.html