关键词

文本转流程图图表生成Mermaid渲染可视化工具LLM集成

项目简介

flowgen 是一个开源工具，旨在将简单的文本描述转换为美观、结构化的流程图。它特别适合开发者、文档撰写者和技术沟通人员，允许您用易于理解的文本表达逻辑或流程，并自动将其转换为可视化图表。

主要功能点

  • 文本转Mermaid语法： 通过调用大型语言模型（LLM），将用户的自然语言描述转换为标准的Mermaid图表语法。
  • Mermaid渲染： 将Mermaid语法文件渲染成图片格式（如PNG）的流程图。
  • MCP服务器模式： 作为Model Context Protocol (MCP) 服务器运行，提供渲染Mermaid图表的能力，使兼容的LLM客户端（如Claude Desktop）能够直接调用此功能来生成和显示流程图。

安装步骤

  1. 安装 Node.js: 确保您的系统安装了 Node.js 14 或更高版本。
  2. 安装 Chrome/Chromium: 渲染图表需要一个Chrome或Chromium内核的浏览器。
  3. 下载项目代码: 从GitHub仓库下载或克隆 'flowgen' 项目代码。
  4. 安装依赖: 在项目根目录下打开终端，运行以下命令安装项目依赖，包括Mermaid库： 
    npm install
  5. 配置LLM访问: flowgen 需要访问LLM来生成Mermaid语法。您需要设置LLM的API密钥、基础URL和模型名称。可以通过创建 '.env' 文件在项目根目录中添加，例如： 
    LLM_API_KEY="your_llm_api_key"
LLM_BASE_URL="your_llm_base_url" # 例如: https://api.openai.com/v1
LLM_MODEL="your_llm_model" # 例如: gpt-4o
# 如果使用 Azure OpenAI，还需要设置 AZURE_API_VERSION
# AZURE_API_VERSION="your_azure_api_version" # 例如: 2024-12-01-preview
  6. 构建项目: 在项目根目录下运行构建命令： 
    npm run build
    这将在 'build' 目录下生成可执行文件。

服务器配置 (供MCP客户端使用)

MCP服务器需要通过MCP客户端（如Claude Desktop）进行启动和管理。您需要在您的MCP客户端的配置文件（例如 'claude_desktop_config.json'）中添加一个服务器配置条目。

以下是配置的关键信息：

  • 服务器名称 ('server name'): 'flowgen'
  • 启动命令 ('command'): 'node' (使用Node.js解释器启动服务器)
  • 启动参数 ('args'): '[PATH TO YOUR flowgen PROJECT FOLDER]/build/index.js' (Node.js需要执行的服务器入口文件的路径。请将 '[PATH TO YOUR flowgen PROJECT FOLDER]' 替换为您实际克隆或下载 'flowgen' 项目的绝对路径，指向项目根目录)

一个配置示例（请根据您的客户端文档进行添加）：

在您的MCP客户端配置文件中，找到或创建 'mcpServers' 部分，并添加如下结构（注意将路径替换为您的实际路径）：

{
    "mcpServers": {
        // ... 其他已有的服务器配置 ...
        "flowgen": {
            "command": "node",
            "args": [
                "[PATH TO YOUR flowgen PROJECT FOLDER]/build/index.js"
            ]
        }
    }
}

添加配置后，请重启您的MCP客户端，以便客户端能够发现并启动 'flowgen' MCP服务器。

基本使用方法

配置并启动 'flowgen' MCP服务器后，您可以通过兼容的MCP客户端来使用其流程图生成能力。

  1. 向LLM客户端提出请求: 在您的MCP客户端界面中，向LLM提出您希望生成流程图的文本描述，例如：“请生成一个用户登录流程的流程图”。
  2. 客户端协调: MCP客户端会理解您的请求，并可能利用自身的LLM能力结合 'flowgen' MCP服务器的功能来完成任务。通常，这个过程会涉及：
    • 客户端的LLM生成描述对应的Mermaid语法。
    • 客户端调用 'flowgen' MCP服务器的渲染工具，将Mermaid语法渲染成图片。
    • 'flowgen' 服务器执行渲染并将生成的图片路径返回给客户端。
    • 客户端最终向您展示生成的流程图图片。

用户无需直接调用 'renderMermaid' 工具或处理中间文件。通过MCP协议，'flowgen' 的能力被集成到LLM客户端的工作流程中，提供顺畅的用户体验。

信息

分类

AI与计算

访问项目