Logseq Diagrams as Code 插件安装与配置指南

Logseq Diagrams as Code 插件安装与配置指南

logseq-diagrams-as-code Logseq plugin that lets you create diagrams from textual representation (aka 'Diagrams as Code'). It supports a wide range of diagram types and languages, including Mermaid, Graphviz, PlantUML, and many more. 项目地址: https://gitcode.com/gh_mirrors/lo/logseq-diagrams-as-code

1. 项目基础介绍

Logseq Diagrams as Code 是一个开源插件，它允许用户从文本表示（即“图解为代码”）创建图表和其他可视化。该插件支持多种图表类型和语言，包括 Mermaid、Graphviz、PlantUML 等等。

主要编程语言：TypeScript

2. 项目使用的关键技术和框架

• Logseq：一个基于本地 first 的知识库工具。
• Kroki.io：一个在线 diagram 渲染服务，支持多种 diagram 语言。
• PlantUML、Mermaid 等多种 diagram 语言：用于定义和生成图表的语法。

3. 安装和配置准备工作

在开始安装之前，请确保您的系统满足以下要求：

• 安装了 Node.js 和 npm。
• 安装了 Logseq。
• 确保您的 Logseq 是最新版本。

安装步骤

1. 克隆项目仓库
   打开命令行界面，运行以下命令以克隆项目：

   git clone https://github.com/npgrosser/logseq-diagrams-as-code.git
   

2. 安装依赖
   进入克隆后的文件夹，运行以下命令安装项目依赖：

   npm install
   

3. 构建项目
   安装完依赖后，运行以下命令构建项目：

   npm run build
   

4. 配置 Logseq

   • 打开 Logseq 设置。
   • 导航到“插件”部分。
   • 点击“安装插件”并选择从本地文件安装。
   • 选择 logseq-diagrams-as-code 插件文件夹中的 main.js 文件。
   • 安装并启用插件。

5. 配置 Kroki（可选）
   如果您希望使用自己的 Kroki 服务而不是公共服务，需要更新插件配置：

   {
     "kroki": {
       "baseUrl": "https://my-own-kroki-serice/"
     }
   }
   

6. 使用插件

   • 在 Logseq 中使用 {{renderer code_diagram,plantuml}} 的语法来插入图表。
   • 添加 diagram 选项以自定义图表的显示，例如 {{renderer code_diagram,plantuml,title=My Title&caption=My Caption}}。

遵循以上步骤，您应该能够在 Logseq 中成功安装和配置 Logseq Diagrams as Code 插件，开始创建 diagrams as code 的可视化。

logseq-diagrams-as-code Logseq plugin that lets you create diagrams from textual representation (aka 'Diagrams as Code'). It supports a wide range of diagram types and languages, including Mermaid, Graphviz, PlantUML, and many more. 项目地址: https://gitcode.com/gh_mirrors/lo/logseq-diagrams-as-code