首页 / 应用市场 / 插件 / 详情
富文本代码图表
举报 更新于:2024-08-15

富文本代码图表

¥10.00
下载量
11
阅读量
425
  • 分           类: 开发帮助
  • 多    语    言: 未知
  • 当 前  版 本: 1.0.0
  • HkCms版本: >=2.3.2
  • 应 用 标 识: mermaid
免责声明:本站所有插件均由开发者提供,如果损害了您的权利,请联系网站客服,我们核实后会立即删除。

保    障: 第三方商家 安全检测

自动识别页面的pre标签并转换为图表展示

更多写法请参考mermaid-live官网。

富文本图表

基于 https://mermaid.live 的图表插件,支持流程图、序列图、甘特图、类图、状态图、ER图等。

实时预览可直接访问 https://mermaid.live

使用原理

RichContentMermaid 会自动识别页面上 <pre> 标签,如果这两个标签包含了形如 class="language-mind" 的属性,那么 RichContentMermaid 就会自动将这两个标签所包含的代码转换为图表显示。

例如:

    {:hook("mermaid")} //必须调用
    <pre class="mermaid">
            graph TD 
            A[Client] --> B[Load Balancer] 
            B --> C[Server1] 
            B --> D[Server2]
    </pre>

    And here is another:
    <pre class="mermaid">
          graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
  
    </pre>

效果:

image.png

其他图表:

image.png

1.0.0 2024-08-14 >= HkCms_2.3.2
发布了第一个版本

博文

问答

商家类型:个人

联系商家

2228293408

相关应用
一键生成应用

一键生成应用

免费
推荐应用
sitemap地图生成

sitemap地图生成

免费
UEditor百度编辑器插件

UEditor百度编辑器插件

免费
数据库备份还原

数据库备份还原

免费
用户中心插件

用户中心插件

免费
微信群

公众号


在线联系

加入Q群


微信客服

加微信群


返回顶部