FcDesigner Pro

Appearance

Mermaid 图表组件 ​

Mermaid 图表组件是一个基于 Mermaid.js 的 Vue 图表组件，支持通过简单的文本语法创建流程图、时序图、甘特图、类图等多种图表类型。组件提供了丰富的配置选项和事件支持，可以轻松集成到表单设计器中。

学习 Mermaid 语法

Mermaid 使用简单的文本语法来创建图表。如果您是第一次使用 Mermaid，建议先查看官方文档学习语法：

在编辑器中编写和测试您的 Mermaid 代码后，将代码复制到组件的 content 属性中即可。

基础使用 ​

修改图表内容 ​

通过注入的 api.getRule 方法可以动态修改 Mermaid 图表的内容和配置：

js
function onChange($inject) {
    const newContent = `
graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E
`;
    $inject.api.getRule('ref_F2vulxvqc841dac').props.content = newContent;
}

获取组件实例 ​

通过注入的 api.el 方法可以获取组件实例，进行更高级的操作：

js
function getMermaidInstance($inject) {
    const mermaidComponent = $inject.api.el('ref_F2vulxvqc841dac');

    if (mermaidComponent) {
        // 重新加载图表
        mermaidComponent.load();

        // 修改内容后重新加载
        mermaidComponent.$props.content = '新的 Mermaid 代码';
        mermaidComponent.load();
    }
}

配置项 ​

Mermaid 组件提供了丰富的配置选项，您可以通过在设计器中配置属性来自定义图表的行为和外观。

属性名类型默认值必需说明
contentString''是Mermaid 图表代码，支持流程图、时序图、甘特图等多种图表语法
configObject{}否Mermaid 配置对象，用于自定义图表的渲染配置
themeString'default'否图表主题，可选值：default、dark、forest、neutral 等
widthString'100%'否图表容器宽度，支持 CSS 单位（如 px、%、em 等）

事件 ​

Mermaid 组件提供了事件，方便您监听图表状态变化并执行相应的处理。

事件名参数说明
beforeLoadcontent图表加载前事件，在图表初始化前触发
loaded{ svg }图表加载完成事件，在图表渲染完成后触发

方法 ​

Mermaid 组件提供了方法，方便您进行程序化控制。

方法名参数说明返回值
load-重新加载图表-

图表类型 ​

Mermaid 支持多种图表类型，每种类型都有其特定的语法。以下是常用的图表类型：

支持的图表类型 ​

类型名说明语法示例
flowchart流程图graph TD 或 flowchart LR
sequence时序图sequenceDiagram
gantt甘特图gantt
class类图classDiagram
state状态图stateDiagram-v2
er实体关系图erDiagram
journey用户旅程图journey
pie饼图pie
gitgraphGit 图gitgraph
mindmap思维导图mindmap
timeline时间线timeline
quadrantChart象限图quadrantChart
requirement需求图requirementDiagram
C4ContextC4 上下文图C4Context

图表类型示例 ​

流程图示例：

mermaid
graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作A]
    B -->|否| D[执行操作B]
    C --> E[结束]
    D --> E

时序图示例：

mermaid
sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    B-->>A: 返回响应

甘特图示例：

mermaid
gantt
    title 项目进度
    dateFormat YYYY-MM-DD
    section 阶段一
    任务A :a1, 2024-01-01, 30d
    任务B :a2, after a1, 20d
    section 阶段二
    任务C :2024-02-01, 30d

主题配置 ​

Mermaid 组件支持多种内置主题，您可以通过 theme 属性进行配置：

主题名说明
default默认主题（浅色）
dark深色主题
forest森林主题
neutral中性主题

主题使用示例 ​

js
{
    type: 'mermaid',
    field: 'diagram',
    props: {
        content: 'graph TD\n    A --> B',
        theme: 'dark'  // 使用深色主题
    }
}

高级配置 ​

通过 config 属性，您可以传递 Mermaid 的完整配置对象，实现更精细的控制：

js
{
    type: 'mermaid',
    field: 'advanced',
    props: {
        content: 'graph TD\n    A --> B',
        config: {
            startOnLoad: true,
            theme: 'dark',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            sequence: {
                diagramMarginX: 50,
                diagramMarginY: 10,
                actorMargin: 50
            },
            gantt: {
                leftPadding: 75,
                gridLineStartPadding: 35
            }
        }
    }
}