mermaid 图表渲染自适应

[Sharang-heng]

import { useEffect, useState } from "react";
import Vditor from "vditor";
import "vditor/dist/index.css";

const App = () => {
  const [vd, setVd] = useState<Vditor>();
  useEffect(() => {
    const vditor = new Vditor("vditor", {
      after: () => {
        vditor.setValue("`\`\`\`mermaid
gantt
title 开发项目计划
dateFormat  YYYY-MM-DD
section 平台开发
a平台     :active, a1, 2023-01-01, 1d
b平台    :after a1  , 2023-01-01, 3d
c平台    :after a1, 2023-01-04, 3d\`\`\``);        setVd(vditor);
      },
    });
    // Clear the effect
    return () => {
      vd?.destroy();
      setVd(undefined);
    };
  }, []);
  return <div id="vditor" className="vditor" />;
};

export default App;

[Vanessa219]

这个是由于宽度不够，编辑器宽一点就可以了

[Sharang-heng]

能不能做个自适应优化一下，而且这个时间轴也很奇怪

[Vanessa219]

好的，下个版本改进