【MarkDown】CSDN Markdown之实体关系图erDiagram详解

已于 2023-06-20 22:05:56 修改
阅读量2.9k 收藏 6
点赞数 3
分类专栏： 语言-排版 文章标签： 实体关系图 ER图
于 2023-06-16 16:41:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenlu5201314/article/details/131248702
版权

实体关系图

ER模型，全称为实体联系模型、实体关系模型或实体联系模式图（ERD）（英语：Entity-relationship model）由美籍华裔计算机科学家陈品山发明，是概念数据模型的高层描述所使用的数据模型或模式图             百度百科.

注意 ER 建模的从业者几乎总是把实体类型简单地称为实体。例如，消费者实体类型会简单地称为消费者实体。这种用法非常普遍，因此最好不要做任何其他事情，但从技术上讲，实体是实体类型的抽象实例，而这正是 ER 图所展示的 - 抽象实例及其之间的关系。这就是为什么实体总是使用单数名词命名的原因。

Mermaid 可以渲染ER图表
CSDN mermaid v8.14.0 不支持双引号包含 Unicode字符 、不支持 title 标签
以下是 mermaid v8.14.0 的代码

代码：
erDiagram
    XiaoFeiZhe ||--o{ DingDan : "下单"
    DingDan ||--|{ DingDanMingXi : "包含"
    XiaoFeiZhe }|\.\.|{ ShouHuoDiZhi : "使用"
XiaoFeiZhe DingDan DingDanMingXi ShouHuoDiZhi 下单 包含 使用
  • XiaoFeiZhe: 消费者
  • DingDan: 订单
  • DingDanMingXi: 订单明细
  • ShouHuoDiZhi: 收货地址

以下是 mermaid v10.2.3 的代码示例

---
title: 订单示例
---
erDiagram
    "消费者" ||--o{ "订单" : "下单"
    "订单" ||--|{ "订单明细" : "包含"
    "消费者" }|\.\.|{ "收货地址" : "使用"

---
title: 订单示例
---
erDiagram
    "消费者" ||--o{ "订单" : "下单"
    "订单" ||--|{ "订单明细" : "包含"
    "消费者" }|..|{ "收货地址" : "使用"

实体名称通常首字母大写，虽然没有一种公认的标准来规定这一点，在 Mermaid 中也不是必须的。

实体之间的关系由具有基数表示的终端标记的线表示。Mermaid 使用最流行的鸟脚符号表示法。鸟脚符号直观地传达了与其连接的实体的实例数量的可能性。

ER 图可以用于各种各样的目的，从不包含任何实现细节的抽象逻辑模型到关系型数据库表的物理模型。在 ER 图中包含属性定义可以有助于理解实体的目的和意义。这些属性定义不一定需要详尽无遗；通常一小部分属性就足够了。Mermaid 允许以其类型和名称来定义这些属性。

代码：

***CSDN mermaid v8.14.0 ***

  • 不支持双引号包含 Unicode字符定义变量

以下是 mermaid v8.14.0 的代码示例

erDiagram
    XiaoFeiZhe ||--o{ DingDan : "下单"
    XiaoFeiZhe {
        string XiaoFeiZheXingMing
        string XiaoFeiZheXuHao
        string XiaoFeiZheHangYe
    }
    DingDan ||--|{ DingDanMingXi : "包含"
    DingDan {
        int DingDanXuHao
        string ShouHuoDiZhi
    }
    DingDanMingXi {
        string ChanPinXuHao
        int ChanPinShuLiang
        float ChanPinDanJia
    }
XiaoFeiZhe string XiaoFeiZheXingMing string XiaoFeiZheXuHao string XiaoFeiZheHangYe DingDan int DingDanXuHao string ShouHuoDiZhi DingDanMingXi string ChanPinXuHao int ChanPinShuLiang float ChanPinDanJia 下单 包含
  • XiaoFeiZhe: 消费者
  • DingDan: 订单
  • DingDanMingXi: 订单明细
  • ShouHuoDiZhi: 收货地址
  • XiaoFeiZheXingMing: 消费者姓名
  • XiaoFeiZheXuHao: 消费者序号
  • XiaoFeiZheHangYe: 消费者行业
  • DingDanXuHao: 订单序号
  • ShouHuoDiZhi: 收货地址
  • ChanPinXuHao: 产品序号
  • ChanPinShuLiang: 产品数量
  • ChanPinDanJia: 产品单价

以下是 mermaid v10.2.3 的代码示例

erDiagram
    "消费者" ||--o{ "订单" : "下单"
    "消费者" {
        string XiaoFeiZheXingMing
        string XiaoFeiZheXuHao
        string XiaoFeiZheHangYe
    }
    "订单" ||--|{ "订单明细" : "包含"
    "订单" {
        int DingDanXuHao
        string ShouHuoDiZhi
    }
    "订单明细" {
        string ChanPinXuHao
        int ChanPinShuLiang
        float ChanPinDanJia
    }

在 ER 图中包含属性时，您必须决定是否将外键作为属性包含。这可能取决于您需要多么准确地表示关系表结构。如果您的图是一个逻辑模型而不是关系模型，那么最好将其省略，因为关联关系已经传达了实体如何彼此关联的方式。例如，JSON 数据结构可以使用数组实现一对多的关系，而不需要外键属性。同样，面向对象编程语言可以使用指针或引用集合。即使是为关系实现而设计的模型，您也可以决定包含外键属性会重复已由关系描绘的信息，并且不会为实体添加含义。

语法

实体和关系

Mermaid ER图的语法与 PlantUML 兼容，可以通过扩展标签关系来实现。每个语句由以下部分组成：

<第一个实体> [<关系> <第二个实体> : <关系标签>]

其中:

  • 第一个实体 是实体名称。名称必须以字母开头，可以包含数字、连字符和下划线。

  • 关系 描述了两个实体之间的相互关系。请参见以下说明。

  • 第二个实体 是另一个实体名称

  • 关系标签 描述了以第一个实体为视角的关系。
    例如:

    “别墅” ||–|{ “房间” : “包含”
    这个语句可以被理解为一个别墅包含一个或多个房间，同时房间只是一个别墅的一部分。你可以看到这个标签是以第一个实体的视角来描述的：一个别墅包括一个房间，但一个房间并不包括一个别墅。当从第二个实体的视角考虑时，等效的标签通常很容易推断出来。（有些ER图会从两个实体的角度标注关系，但在这里不支持这种方式，而且通常是多余的）。

语句中只有第一个实体的部分是必须的。这使得在 ER 图的迭代构建过程中可以显示没有关系的实体，这在某些情况下很有用。如果指定了语句的任何其他部分，则所有部分都是必需的。

关系语法

每个语句中的关系部分可以被分解为三个子组件：

  • 相对于第二个实体的基数。
  • 关系是否授予“子”实体身份。
  • 相对于第一个实体的基数。

基数是描述另一个实体中可以与其所关联的实体相关联的元素数量的属性。 在上面的例子中，一个别墅可以和一个或多个房间实例相关联，而一个房间只能与一个别墅相关联。在每个基数标记中都有两个字符。最外层的字符表示最大值，最内层的字符表示最小值。下表总结了可能出现的基数。

左侧值右侧值含义
|oo|0或1
||||恰好一个
}oo{0 或 更多 (没有上限)
}||{1 或 更多 (没有上限)
别名
左侧值右侧值Alias for
one or zeroone or zero0或1
zero or onezero or one0或1
one or moreone or more1 或 更多
one or manyone or many1 或 更多
many(1)many(1)1 或 更多
1+1+1 或 更多
zero or morezero or more0 或 更多
zero or manyzero or many0 或 更多
many(0)many(1)0 或 更多
0+0+0 或 更多
only oneonly one恰好一个
11恰好一个

标识

关系可以分为标识和非标识，分别用实线或虚线表示。这在涉及到一个实体没有独立存在的情况下是很重要的。例如，一家保险公司可能需要储存关于 驾驶员 的数据。在建模时，我们可能会观察到 汽车 可以被许多 人 驾驶，而 人 可以驾驶许多 汽车 - 这两个实体都可以独立存在，因此这是一种非标识关系，我们可以在 Mermaid 中指定为："人" }|..|{ "汽车"："驾驶"。请注意，关系中间有两个点，这将导致两个实体之间绘制出一个虚线。但是当这个多对多关系被拆分成两个一对多关系时，我们会发现 驾驶员 不能没有 人 和 汽车 存在——这些关系变成了标识性关系，会使用连字符进行指定，其对应实线：

别名

值称作
to标识
optionally to不可标识
代码：

***CSDN mermaid v8.14.0 ***

  • 不支持双引号包含 Unicode字符定义变量

以下是 mermaid v8.14.0 的代码示例

erDiagram
    QiChe ||--o{ JiaShiYuan : "允许"
   Ren ||--o{ JiaShiYuan : "是"
QiChe JiaShiYuan Ren 允许 是
  • QiChe: 汽车
  • Ren: 人
  • JiaShiYuan: 驾驶员

以下是 mermaid v10.2.3 的代码示例

erDiagram
    "汽车" ||--o{ "驾驶员" : "允许"
    "人" ||--o{ "驾驶员" : "是"

属性

可以通过指定实体名称，后跟具有多个类型名称对的一个块来为实体定义属性，其中一个块由一个开放的 { 和一个关闭的 } 来界定。属性被呈现在实体框内。例如：

代码：

***CSDN mermaid v8.14.0 ***

  • 不支持双引号包含 Unicode字符定义变量

以下是 mermaid v8.14.0 的代码示例

erDiagram
    QiChe ||--o{ JiaShiYuan : "允许"
    QiChe {
        string ZhuCeHao
        string ZhiZaoShang
        string XingHao
    }
    Ren ||--o{ JiaShiYuan : "是"
    Ren {
        string XingShi
        string MingZi
        int NianLing
    }
QiChe string ZhuCeHao string ZhiZaoShang string XingHao JiaShiYuan Ren string XingShi string MingZi int NianLing 允许 是
  • QiChe: 汽车
    • ZhuCeHao: 注册号
    • ZhiZaoShang: 制造商
    • XingHao: 型号
  • Ren: 人
    • XingShi: 姓氏
    • MingZi: 名字
    • NianLing: 年龄
  • JiaShiYuan: 驾驶员

以下是 mermaid v10.2.3 的代码示例

erDiagram
    "汽车" ||--o{ "驾驶员" : "允许"
    "汽车" {
        string ZhuCeHao
        string ZhiZaoShang
        string XingHao
    }
    "人" ||--o{ "驾驶员" : "是"
    "人" {
        string XingShi
        string MingZi
        int NianLing
    }

类型和名称的值必须以字母字符开头，可以包含数字、连字符、下划线、括号和方括号。除此之外，没有任何限制，也没有隐含的有效数据类型集。

属性键和注释

实体属性还可以定义关键字或注释。关键字可以是PK(Primary Key)、FK(Foreign Key)或UK(Unique Key)，分别表示主键、外键或唯一键。要在单个属性上指定多个关键字约束，请使用逗号（例如，PK,FK）进行分隔。注释由属性末尾的双引号定义。注释本身不能有双引号字符。

***CSDN mermaid v8.14.0 ***

  • 不支持双引号包含 Unicode字符定义变量
  • 不支持 string[] 定义数组
  • 不支持 string(99) 定义数组长度,
  • 不支持 UK定义唯一键
  • 不支持 FK定义外键
  • 不支持only one to zero or more语句来描述实体关

以下是 mermaid v8.14.0 的代码示例

代码：
erDiagram
    QiChe ||--o{ JiaShiYuan : "允许"
    QiChe {
        string ZhuCeHao PK
        string ZhiZaoShang
        string XingHao
        string LingBuJian
    }
    Ren ||--o{ JiaShiYuan : "是"
    Ren {
        string JiaShiZheng PK "驾驶证 #"
        string XingShi "无长度说明"
        string MingZi
        string ShouJiHaoMa
        int NianLing
    }
    JiaShiYuan {
        string XingShiZheng PK
        string JiaShiZheng PK
    }
    ZhiZaoShang ||--o{ QiChe  : "制造"
QiChe string ZhuCeHao PK string ZhiZaoShang string XingHao string LingBuJian JiaShiYuan string XingShiZheng PK string JiaShiZheng PK Ren string JiaShiZheng PK 驾驶证 # string XingShi 只允许输入99个字符 string MingZi string ShouJiHaoMa int NianLing ZhiZaoShang 允许 是 制造
  • QiChe: 汽车
    • ZhuCeHao: 注册号
    • ZhiZaoShang: 制造商
    • XingHao: 型号
    • LingBuJian: 零部件
  • Ren: 人
    • JiaShiZheng: 驾驶证
    • XingShi: 姓氏
    • MingZi: 名字
    • ShouJiHaoMa：手机号码
    • NianLing: 年龄
  • JiaShiYuan: 驾驶员
    • XingShiZheng: 行驶证
    • JiaShiZheng: 驾驶证
  • ZhiZaoShang: 制造商

以下是 mermaid v10.2.3 的代码示例

erDiagram
    "汽车" ||--o{ "驾驶员" : "允许"
    "汽车" {
        string ZhuCeHao PK
        string ZhiZaoShang
        string XingHao
        string[] LingBuJian
    }
    "人" ||--o{ "驾驶员" : "是"
    "人" {
        string JiaShiZheng PK "驾驶证 #"
        string(99) XingShi "只允许输入99个字符"
        string MingZi
        string ShouJiHaoMa UK
        int NianLing
    }
    "驾驶员" {
        string XingShiZheng PK, FK
        string JiaShiZheng PK, FK
    }
    "制造商" only one to zero or more "汽车" : "制造"

其他事项

如果你希望关系标签是多个单词，你必须在短语周围使用双引号。
如果你不想在关系上显示标签，你必须使用一个空的双引号字符串。

样式

配置选项

对于简单的颜色自定义：

名称作用
fill视图或属性的背景颜色
stroke实体或属性的边框颜色，关系的线条颜色

使用的类自定义样式

以下CSS类选择器可用于更丰富的样式:

选择器描述
.er.attributeBoxEven表示包含偶数行属性框
.er.attributeBoxOdd表示包含奇数行属性框
.er.entityBox表示实体框
.er.entityLabel表示实体标签文本
.er.relationshipLabel表示关系标签文本
.er.relationshipLabelBox表示关系标签框
.er.relationshipLine表示关系线

偶数行属性框

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mermaid 实体关系图</title>
    <script src="./mermaid.min.10.2.3.js"></script>
  </head>
  <body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
    <pre class="mermaid">
          erDiagram
          "汽车" ||--o{ "驾驶员" : "允许"
          "汽车" {
              string ZhuCeHao PK
              string ZhiZaoShang
              string XingHao
              string[] LingBuJian
          }
          "人" ||--o{ "驾驶员" : "是"
          "人" {
              string JiaShiZheng PK "驾驶证 #"
              string(99) XingShi "只允许输入99个字符"
              string MingZi
              string ShouJiHaoMa UK
              int NianLing
          }
          "驾驶员" {
              string XingShiZheng PK, FK
              string JiaShiZheng PK, FK
          }
          "制造商" only one to zero or more "汽车" : "制造"
    </pre>
    <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          theme: 'base',
          er:{
           // titleTopMargin: 3,
          //  diagramPadding: 200,
          //  layoutDirection: "LR",
          //  minEntityWidth: 200,
           // minEntityHeight: 20,
           // entityPadding: 3,
           // stroke: "red",
           // fill:"blue",
           // fontSize: 24,
           // useMaxWidth: true
          },
      themeCSS: ".er.attributeBoxEven{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.attributeBoxOdd{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;width:300px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.entityLabel { fill: red; font-size:32.2px;font-family:Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLabelBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.relationshipLabel { fill: red; font-size:32.2px;font-family:楷体,Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLine { stroke:red;stroke-width:1;}" 
      };
      mermaid.initialize(config);
      </script>
  </body>
</html>

在这里插入图片描述

奇数行属性框

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mermaid 实体关系图</title>
    <script src="./mermaid.min.10.2.3.js"></script>
  </head>
  <body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
    <pre class="mermaid">
          erDiagram
          "汽车" ||--o{ "驾驶员" : "允许"
          "汽车" {
              string ZhuCeHao PK
              string ZhiZaoShang
              string XingHao
              string[] LingBuJian
          }
          "人" ||--o{ "驾驶员" : "是"
          "人" {
              string JiaShiZheng PK "驾驶证 #"
              string(99) XingShi "只允许输入99个字符"
              string MingZi
              string ShouJiHaoMa UK
              int NianLing
          }
          "驾驶员" {
              string XingShiZheng PK, FK
              string JiaShiZheng PK, FK
          }
          "制造商" only one to zero or more "汽车" : "制造"
    </pre>
    <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          theme: 'base',
          er:{
           // titleTopMargin: 3,
          //  diagramPadding: 200,
          //  layoutDirection: "LR",
          //  minEntityWidth: 200,
           // minEntityHeight: 20,
           // entityPadding: 3,
           // stroke: "red",
           // fill:"blue",
           // fontSize: 24,
           // useMaxWidth: true
          },
      //themeCSS: ".er.attributeBoxEven{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      themeCSS: ".er.attributeBoxOdd{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;width:300px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.entityLabel { fill: red; font-size:32.2px;font-family:Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLabelBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.relationshipLabel { fill: red; font-size:32.2px;font-family:楷体,Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLine { stroke:red;stroke-width:1;}" 
      };
      mermaid.initialize(config);
      </script>
  </body>
</html>

在这里插入图片描述

实体框

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mermaid 实体关系图</title>
    <script src="./mermaid.min.10.2.3.js"></script>
  </head>
  <body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
    <pre class="mermaid">
          erDiagram
          "汽车" ||--o{ "驾驶员" : "允许"
          "汽车" {
              string ZhuCeHao PK
              string ZhiZaoShang
              string XingHao
              string[] LingBuJian
          }
          "人" ||--o{ "驾驶员" : "是"
          "人" {
              string JiaShiZheng PK "驾驶证 #"
              string(99) XingShi "只允许输入99个字符"
              string MingZi
              string ShouJiHaoMa UK
              int NianLing
          }
          "驾驶员" {
              string XingShiZheng PK, FK
              string JiaShiZheng PK, FK
          }
          "制造商" only one to zero or more "汽车" : "制造"
    </pre>
    <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          theme: 'base',
          er:{
           // titleTopMargin: 3,
          //  diagramPadding: 200,
          //  layoutDirection: "LR",
          //  minEntityWidth: 200,
           // minEntityHeight: 20,
           // entityPadding: 3,
           // stroke: "red",
           // fill:"blue",
           // fontSize: 24,
           // useMaxWidth: true
          },
      //themeCSS: ".er.attributeBoxEven{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.attributeBoxOdd{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;width:300px;height:20px;}" 
      themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.entityLabel { fill: red; font-size:32.2px;font-family:Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLabelBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.relationshipLabel { fill: red; font-size:32.2px;font-family:楷体,Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLine { stroke:red;stroke-width:1;}" 
      };
      mermaid.initialize(config);
      </script>
  </body>
</html>

在这里插入图片描述

实体标签文本

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mermaid 实体关系图</title>
    <script src="./mermaid.min.10.2.3.js"></script>
  </head>
  <body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
    <pre class="mermaid">
          erDiagram
          "汽车" ||--o{ "驾驶员" : "允许"
          "汽车" {
              string ZhuCeHao PK
              string ZhiZaoShang
              string XingHao
              string[] LingBuJian
          }
          "人" ||--o{ "驾驶员" : "是"
          "人" {
              string JiaShiZheng PK "驾驶证 #"
              string(99) XingShi "只允许输入99个字符"
              string MingZi
              string ShouJiHaoMa UK
              int NianLing
          }
          "驾驶员" {
              string XingShiZheng PK, FK
              string JiaShiZheng PK, FK
          }
          "制造商" only one to zero or more "汽车" : "制造"
    </pre>
    <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          theme: 'base',
          er:{
           // titleTopMargin: 3,
          //  diagramPadding: 200,
          //  layoutDirection: "LR",
          //  minEntityWidth: 200,
           // minEntityHeight: 20,
           // entityPadding: 3,
           // stroke: "red",
           // fill:"blue",
           // fontSize: 24,
           // useMaxWidth: true
          },
      //themeCSS: ".er.attributeBoxEven{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.attributeBoxOdd{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;width:300px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      themeCSS: ".er.entityLabel { fill: red; font-size:32.2px;font-family:Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLabelBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.relationshipLabel { fill: red; font-size:32.2px;font-family:楷体,Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLine { stroke:red;stroke-width:1;}" 
      };
      mermaid.initialize(config);
      </script>
  </body>
</html>

在这里插入图片描述

关系标签框

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mermaid 实体关系图</title>
    <script src="./mermaid.min.10.2.3.js"></script>
  </head>
  <body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
    <pre class="mermaid">
          erDiagram
          "汽车" ||--o{ "驾驶员" : "允许"
          "汽车" {
              string ZhuCeHao PK
              string ZhiZaoShang
              string XingHao
              string[] LingBuJian
          }
          "人" ||--o{ "驾驶员" : "是"
          "人" {
              string JiaShiZheng PK "驾驶证 #"
              string(99) XingShi "只允许输入99个字符"
              string MingZi
              string ShouJiHaoMa UK
              int NianLing
          }
          "驾驶员" {
              string XingShiZheng PK, FK
              string JiaShiZheng PK, FK
          }
          "制造商" only one to zero or more "汽车" : "制造"
    </pre>
    <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          theme: 'base',
          er:{
           // titleTopMargin: 3,
          //  diagramPadding: 200,
          //  layoutDirection: "LR",
          //  minEntityWidth: 200,
           // minEntityHeight: 20,
           // entityPadding: 3,
           // stroke: "red",
           // fill:"blue",
           // fontSize: 24,
           // useMaxWidth: true
          },
      //themeCSS: ".er.attributeBoxEven{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.attributeBoxOdd{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;width:300px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.entityLabel { fill: red; font-size:32.2px;font-family:Times New Roman;font-weight:700}" 
      themeCSS: ".er.relationshipLabelBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.relationshipLabel { fill: red; font-size:32.2px;font-family:楷体,Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLine { stroke:red;stroke-width:1;}" 
      };
      mermaid.initialize(config);
      </script>
  </body>
</html>

在这里插入图片描述

关系标签文本

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mermaid 实体关系图</title>
    <script src="./mermaid.min.10.2.3.js"></script>
  </head>
  <body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
    <pre class="mermaid">
          erDiagram
          "汽车" ||--o{ "驾驶员" : "允许"
          "汽车" {
              string ZhuCeHao PK
              string ZhiZaoShang
              string XingHao
              string[] LingBuJian
          }
          "人" ||--o{ "驾驶员" : "是"
          "人" {
              string JiaShiZheng PK "驾驶证 #"
              string(99) XingShi "只允许输入99个字符"
              string MingZi
              string ShouJiHaoMa UK
              int NianLing
          }
          "驾驶员" {
              string XingShiZheng PK, FK
              string JiaShiZheng PK, FK
          }
          "制造商" only one to zero or more "汽车" : "制造"
    </pre>
    <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          theme: 'base',
          er:{
           // titleTopMargin: 3,
          //  diagramPadding: 200,
          //  layoutDirection: "LR",
          //  minEntityWidth: 200,
           // minEntityHeight: 20,
           // entityPadding: 3,
           // stroke: "red",
           // fill:"blue",
           // fontSize: 24,
           // useMaxWidth: true
          },
      //themeCSS: ".er.attributeBoxEven{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.attributeBoxOdd{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;width:300px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.entityLabel { fill: red; font-size:32.2px;font-family:Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLabelBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      themeCSS: ".er.relationshipLabel { fill: red; font-size:32.2px;font-family:楷体,Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLine { stroke:red;stroke-width:1;}" 
      };
      mermaid.initialize(config);
      </script>
  </body>
</html>

在这里插入图片描述

关系线

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mermaid 实体关系图</title>
    <script src="./mermaid.min.10.2.3.js"></script>
  </head>
  <body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
    <pre class="mermaid">
          erDiagram
          "汽车" ||--o{ "驾驶员" : "允许"
          "汽车" {
              string ZhuCeHao PK
              string ZhiZaoShang
              string XingHao
              string[] LingBuJian
          }
          "人" ||--o{ "驾驶员" : "是"
          "人" {
              string JiaShiZheng PK "驾驶证 #"
              string(99) XingShi "只允许输入99个字符"
              string MingZi
              string ShouJiHaoMa UK
              int NianLing
          }
          "驾驶员" {
              string XingShiZheng PK, FK
              string JiaShiZheng PK, FK
          }
          "制造商" only one to zero or more "汽车" : "制造"
    </pre>
    <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          theme: 'base',
          er:{
           // titleTopMargin: 3,
          //  diagramPadding: 200,
          //  layoutDirection: "LR",
          //  minEntityWidth: 200,
           // minEntityHeight: 20,
           // entityPadding: 3,
            stroke: "red",
           // fill:"blue",
           // fontSize: 24,
           // useMaxWidth: true
          },
      //themeCSS: ".er.attributeBoxEven{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.attributeBoxOdd{stroke:red;stroke-width:3;fill:blue;width:100px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;width:300px;height:20px;}" 
      //themeCSS: ".er.entityBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.entityLabel { fill: red; font-size:32.2px;font-family:Times New Roman;font-weight:700}" 
      //themeCSS: ".er.relationshipLabelBox{stroke:red;stroke-width:3;fill:blue;margin:6px}" 
      //themeCSS: ".er.relationshipLabel { fill: red; font-size:32.2px;font-family:楷体,Times New Roman;font-weight:700}" 
      themeCSS: ".er.relationshipLine { stroke:red;stroke-width:2;}" 
      };
      mermaid.initialize(config);
      </script>
  </body>
</html>

在这里插入图片描述

其他样式

init.er 配置

  <script>
      var config = {
          startOnLoad:true,
          logLevel: 'debug', 
          er:{
            titleTopMargin: 3,
            diagramPadding: 200,
            layoutDirection: "LR",
            minEntityWidth: 200,
            minEntityHeight: 20,
            entityPadding: 3,
            stroke: "red",
           fill:"blue",
           fontSize: 12,
           useMaxWidth: true
          }
      };
      mermaid.initialize(config);
      </script>
  • titleTopMargin :
  • diagramPadding: 整个实体关系图与上下左右的距离
  • layoutDirection: 实体关系图方向，支持：“TB”, “BT”, “LR”, “RL”
  • minEntityWidth: 最小实体框宽度
  • minEntityHeight: 最小实体框高度
  • entityPadding
  • stroke： 关系线的颜色
  • fill：实体框的填充颜色，无效
  • fontSize：字体大小
  • useMaxWidth：当设置该标志为 true 时，图表宽度将被锁定为100％并根据可用空间进行缩放。如果设置为 false，则图表将保留其绝对宽度。
少莫千华
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
csdn的Markdown原始模板源码.txt
10-22
CSDN Markdown 的原始模板的源码，复制到 Markdown 上就可以直接现实出来原始模板的效果
Notes: E/ R Diagram （数据库ER图）
Steven Li's Zone
09-02 8829
需要E/R图的动机：E/R图是关系型数据库的抽象，以一种抽象的、更高层的描述方式去描述一个数据库各个Entity（实体）之间的关系和每个实体的Attributes（特点）。当你去从另一个数据库的管理员当中接手他的数据库管理工作时，最能节省你熟悉数据库的工具就是E/R图，否则，看代码再慢慢理解schema很费时。 作为后端程序员，必须能够胜任的角色是：1）能开发数据库的接口程序给Naive
数据建模er图_ER图/ ER建模简介
cumtv80668的专栏
07-15 4205
数据建模er图The Entity Relationship Diagram is used to understand the relation of different entity (objects ortables) in the database. ER Diagram helps us to Understand the structure of back-end. It is a p...
Markdown语法详解
04-29
MarkDown是世界上最优美最简洁的写博客的语言，全部用法汇总如下，请慢用！! Markdowm语法001：标题 Markdowm语法002：引用 Markdown语法003：斜体和粗体、红色显示及其他字体颜色 Markdown语法004：链接和图片 Markdown语法005：分割线 Markdown语法006：中文首行缩进 Markdown语法007：表格 Markdown语法008：定义列表（有序列表、无序列表、缩进列表） Markdown语法009：行内代码和代码块 Markdown语法010：脚注 Markdown语法011：目录 Markdown语法012：UML 图（序列图和流程图） Markdown语法:013：离线写博客 Markdown语法014：浏览器兼容 Markdown语法015：快捷键 Markdown语法016：总结
csdn文章转换为markdown格式
10-01
自己写的小工具，可以直接获取csdn文章并转换为markdown格式，轻松获取csdn文章，有兴趣的可以下载。
【纯复习用】数据库笔记（2）ER Diagram
xzt1111的博客
02-24 3886
目录 Entity-Relationship Model Entity ER Diagram Different attributetypes（属性的不同类型） Simple attribute Composite attribute Multi-valued attribute Derived attribute (派生属性) Key attributes Key Composite Key Relationship (Binary relationship) B...
MarkDown中写E-R图、甘特图、饼图的方法
Sig的博客
03-05 2592
MarkDown中使用Mermaid写E-R图、甘特图以及饼图
Markdown mermaid种草(6)_ ER图
耳东小白的小笔记本儿
02-24 9519
耳东小白倾情推荐，markdown绘图神器mermaid之ER图
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
小嗷犬的博客
07-04 6021
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
Markdown 实体关系图详解
小北的博客
01-18 1164
“实体关系模型 (或ER模型) Entity Relationship Diagram描述了特定知识领域中相关的感兴趣事物。基本ER模型由实体类型 (对感兴趣的事物进行分类) 组成，并指定实体 (这些实体类型的实例) 之间可以存在的关系。”
Markdown+Bootstrap图片自适应属性详解
09-02
主要为大家详细介绍了Markdown+Bootstrap图片自适应属性，感兴趣的朋友可以参考一下
一键将csdn文章转为markdown格式
10-20
一键将csdn文章转为markdown格式 输入链接并回车即可自动下载并将文章转为markdown
markdown最全数学公式速查
热门推荐
博客
01-30 9万+
markdown最全数学公式 我们在用markdown写文档时有时候少不了需要插入一些公式，然而markdown公式输入远没有word这么直观，有很多复杂的格式和符号的英语缩写需要记忆，经常是刚用完，过几天不用又都忘记了，因此在这里将数学公式的Latex编辑方式做一个整理，以方便自己和读者今后使用。 分数，平方 算式 markdown 7x+51+y2" role
使用markdown画流程图、时序图等
учёба
11-30 1882
使用markdown画流程图、时序图等
在Markdown中用mermaid画流程图和ER图
weixin_44493841的博客
08-27 8366
在Markdown中用mermaid画流程图 mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用。 流程图方向有下面几个值 TB 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 TD 同TB 示例 从上到下 ​```mermaid graph TD A --> B ​``` 效果： AB 从左到...
在Markdown中使用Mermaid来绘制ER图
weixin_44943389的博客
07-08 1084
在Markdown中使用Mermaid来绘制ER图
Mermaid知识点总结9 - Entity Relationship Diagram
u011315681的博客
09-10 1742
Mermaid知识点总结9 - Entity Relationship Diagram Entity Relationship Diagram也就是实体关系图，描述了某个特定领域实体之间的关系，一个基本的ER模型包含实体类型和实体之间的关系 下面给出一个ER关系图的实例： erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRE
Entity-Relationship Model(ER Diagram)实体关系模型的建立以及Key（键）的分类
M1M1M16的博客
04-16 9649
首先了解这样几个名词：Entity 我们要依此建模的实体，在E-R图中用矩形表示（例子中的student、course）Attributes 实体的属性， 在E-R图中用椭圆表示，与相应的entity连接Relationship 实体与实体之间的关系，在E-R图中用菱形表示，连接相应的实体（数量没有限制，依情况而定）Primary Key 在E-R图中，属于主键的属性要加下划线Keys（键的几种分...
0.0.0 VScode插件platformIO开发环境的安装[esp32、8266]_̌萌新历险记的博客-CSDN博客.mhtml
最新发布
05-02
0.0.0 VScode插件platformIO开发环境的安装[esp32、8266]_̌萌新历险记的博客-CSDN博客.mhtml
markdown 时序图
08-23
Markdown时序图是一种用于描述交互过程和时间顺序的图表。它是通过使用特定的语法来表示参与者、消息和备注等元素来构建的。在Markdown中，可以使用一些特定的语法来创建时序图，如使用`sequenceDiagram`关键字开头，使用`participant`关键字定义参与者，使用箭头连接参与者表示消息的交互等。在时序图中还可以使用一些其他的关键字和符号来表示循环、条件判断、并行等场景。通过使用这些语法，可以清晰、简洁地描述交互过程和时间顺序。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【MarkDown】CSDN Markdown之时序图sequenceDiagram详解](https://blog.csdn.net/chenlu5201314/article/details/131172349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值