效果

自定义CSS样式

/**mermaid 加强标题  <b></b>**/
  
  foreignObject {
    overflow: visible;
  }

  /**平台入口**/
  foreignObject .os{
    position: absolute;
    top: -100%;
    transform: translate(0%, -50%);
    background: hsl(258deg 62% 77% / 72%);
    font-family: sans-serif;
    font-size: 12px;
    color: #ffffff;
  }
  /**平台入口**/
  foreignObject .in{
    position: absolute;
    top: -100%;
    transform: translate(0%, -50%);
    background: hsl(258deg 62% 77% / 72%);
    font-family: sans-serif;
    font-size: 12px;
    color: #ffffff;
  }

  /**菜单位置**/
  foreignObject .menu{
    position: absolute;
    top: -50%;
    transform: translate(0%, -50%);
    background: hsl(258deg 62% 77% / 72%);
    font-family: sans-serif;
    font-size: 12px;
    color: #ffffff;
  }
  /**数据列表**/
  foreignObject .list{
    position: absolute;
    top: -100%;
    transform: translate(0%, -50%);
    background: hsl(258deg 62% 77% / 72%);
    font-family: sans-serif;
    font-size: 12px;
    color: #ffffff;
  }
  /**单条数据**/
  foreignObject .one{
    position: absolute;
    top: -50%;
    transform: translate(0%, -50%);
    background: hsl(258deg 62% 77% / 72%);
    font-family: sans-serif;
    font-size: 12px;
    color: #ffffff;
  }
  /**功能按钮**/
  foreignObject .button{
    position: absolute;
    top: -50%;
    transform: translate(0%, -50%);
    background: hsl(258deg 62% 77% / 72%);
    font-family: sans-serif;
    font-size: 12px;
    color: #ffffff;
  }
  /**可选列表**/
  foreignObject .opt{
    position: absolute;
    top: -50%;
    transform: translate(0%, -50%);
    background: hsl(258deg 62% 77% / 72%);
    font-family: sans-serif;
    font-size: 12px;
    color: #ffffff;
  }
  /**mermaid 加强标题 **/

使用的时候使用

```mermaid
graph LR
   A((系统后台 <div class='in'>开始入口</div>))-->B[产品管理<div class='menu'>菜单位置</div>]-->C[产品列表<div class='menu'>菜单位置</div>]-->D(添　加 <div class='button'>功能按钮</div>)-->|完善好表单后|E([保　存 <div class='button'>操作按钮</div>])
```