英语 | русский

Diplodoc 美人鱼扩展

这是Diplodoc平台的扩展,它增加了对美人鱼图的支持.

扩展部分包括:

• 准备美人鱼运行时间
• 它变换插件
• 对美人鱼进行智能控制的反应钩和组件

快速启动

在变压器上附加插件

import mermaid from '@diplodoc/mermaid-extension';
import transform from '@diplodoc/transform';

const {result} = await transform(
  `
\`\`\`mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
\`\`\`
`,
  {
    plugins: [mermaid.transform({bundle: false})],
  },
);

将美人鱼运行时间添加到您的最后一页

<html>
  <head>
    <!-- Read more about '_assets/mermaid-extension.js' in 'MarkdownIt transform plugin' section -->
    <script src="_assets/mermaid-extension.js" async />
  </head>
  <body style="background: #000">
    ${result.html}
    <script>
      // Read more about 'mermaidJsonp' in 'Prepared Mermaid runtime' section
      window.mermaidJsonp = window.mermaidJsonp || [];
      window.mermaidJsonp.push((mermaid) => {
        mermaid.initialize({theme: 'dark'});
        mermaid.run();
      });
    </script>
  </body>
</html>

准备美人鱼运行时间

美人鱼的问题在于它大小很大. 最预期的行为是同步装入. 但是如果我们想让美人鱼停用 startOnLoad 我们不知道美人鱼什么时候才能被初始化.

准备美人鱼运行时间 旨在解决这个问题. 我们禁用美人鱼 startOnLoad 选择精确控制使步骤. 然后我们添加 mermaidJsonp 全球回调处理美人鱼装入.

此外,我们通过两种方法限制暴露的美人鱼API:

• initialize - 在下次渲染前配置美人鱼
• run - 开始图表渲染

用法示例:

window.mermaidJsonp = window.mermaidJsonp || [];

// This callback will be called when runtime is loaded
window.mermaidJsonp.push((mermaid) => {
  mermaid.initialize({theme: 'dark'});
  mermaid.run();
});

// You can configure more than one callback
window.mermaidJsonp.push((mermaid) => {
  console.log('Render diagrams');
});

自定义初始化选项

已曝光 mermaid.initialize 方法有额外的配置选项 :

• zoom - 启用图表 缩放和探索 特性。 可以是布尔或带有内道具的物体.
  (错误:虚假)
  
  • showMenu - 显示导航菜单.
    (错误:虚假)
  • bindKeys - 启用 wasd 控制系统.
    使用 w/a/s/d 探索图, e/q 缩放 r 以重置图表位置.
    (错误:虚假)
  • maximumScale - 最大缩放范围.
    (过失:5)
  • resetOnBlur - 重置外键上的图表位置.
    (错误:虚假)

它变换插件

插件用于 @ diplodoc/ 变形 软件包.

配置 :

• runtime - 显示结果的运行时脚本名称 script 节.
  (默认 : _assets/mermaid-extension.js(中文(简体) )
  

• bundle - 布尔旗以启用/无法复制捆绑的运行时间到目标目录.
  目标目录所在 <transformer output option>/<plugin runtime option>
  默认: 真
  

• classes - 在美人鱼图上增加一些课.
  示例 my-own-class and-other-class
  

对美人鱼进行智能控制的反应钩和组件

用反应来简化美人鱼控制

import React from 'react';
import {transform} from '@diplodoc/transform';
import mermaid from '@diplodoc/mermaid-extension/plugin';
import {MermaidRuntime} from '@diplodoc/mermaid-extension/react';

const MERMAID_RUNTIME = 'extension:mermaid';

const Doc: React.FC = ({content}) => {
  const result = transform(content, {
    plugins: [
      // Initialize plugin for client/server rendering
      mermaid.transform({
        // Do not touch file system
        bundle: false,
        // Set custom runtime name for searching in result scripts
        runtime: MERMAID_RUNTIME,
      }),
    ],
  });

  // Load mermaid only if one or more diagram should be rendered
  if (result.script.includes(MERMAID_RUNTIME)) {
    // Load oversized mermaid runtime asynchronously
    import('@diplodoc/mermaid-extension/runtime');
  }

  return <div dangerouslySetInnerHTML={{__html: result.html}} />;
};

export const App: React.FC = ({theme}) => {
  return (
    <>
      <Doc
        content={`
            \`\`\`mermaid
            graph TD
                A[Christmas] -->|Get money| B(Go shopping)
                B --> C{Let me think}
            \`\`\`
        `}
      />
      <MermaidRuntime
        zoom={{
          showMenu: true,
          bindKeys: true,
          resetOnBlur: true,
        }}
      />
    </>
  );
};

关于建筑、发展和贡献的详情,见 一般事务人员(其他职等)。 。 。 .