Jekyll-Mermaid 使用教程

Jekyll-Mermaid 使用教程

jekyll-mermaidA Jekyll plugin to simplify the creation of mermaid diagrams and flowcharts in your posts and pages.项目地址:https://gitcode.com/gh_mirrors/je/jekyll-mermaid

项目介绍

Jekyll-Mermaid 是一个 Jekyll 插件，旨在简化在 Jekyll 博客和页面中创建和展示 Mermaid 图表和流程图的过程。Mermaid 是一种类似于 Markdown 的脚本语言，通过 JavaScript 从文本生成图表。

项目快速启动

安装

1. 安装 gem:

   gem install jekyll-mermaid
   

2. 将 gem 添加到你的 Jekyll _config.yml 文件中:

   gems: [jekyll-mermaid]
   

配置

在 _config.yml 中添加以下配置：

mermaid:
  src: 'path/to/mermaid.js'

使用

在你的 Jekyll 模板中使用以下代码块来包含 Mermaid 图表：

{% mermaid %}
graph TD
    A-->B
    A-->C
    B-->D
    C-->D
{% endmermaid %}

应用案例和最佳实践

案例一：流程图

在博客文章中展示一个简单的流程图：

{% mermaid %}
graph TD
    Start --> Stop
{% endmermaid %}

案例二：序列图

在页面中展示一个序列图：

{% mermaid %}
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
{% endmermaid %}

最佳实践

• 按需加载：确保 Mermaid 脚本仅在需要时加载，以提高页面加载速度。
• 主题定制：根据需要调整 Mermaid 的主题，以匹配你的网站风格。

典型生态项目

Jekyll

Jekyll 是一个静态站点生成器，广泛用于构建博客和文档网站。Jekyll-Mermaid 插件扩展了 Jekyll 的功能，使其能够轻松集成 Mermaid 图表。

Mermaid

Mermaid 是一个基于 JavaScript 的图表生成工具，支持多种图表类型，如流程图、序列图和甘特图等。

通过结合 Jekyll 和 Mermaid，你可以创建出既美观又功能强大的静态网站。

jekyll-mermaidA Jekyll plugin to simplify the creation of mermaid diagrams and flowcharts in your posts and pages.项目地址:https://gitcode.com/gh_mirrors/je/jekyll-mermaid