自用记录 | AI辅助 在线画图工具 使用Mermaid语法（流程图 ER图）

已于 2025-04-07 10:42:35 修改
阅读量1.1k 收藏 8
点赞数 4
文章标签： 流程图
于 2025-04-03 13:05:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73972962/article/details/146055068
版权

draw.io绘制流程图-示例

一款好用的在线绘图工具——draw.io ，高效绘制出专业且清晰的流程图，同时还会解锁 AI 画图技能。

draw.io 简介

draw.io 是一款免费的在线图表工具，支持多种图表类型，包括流程图、网络图、UML 图、ER 图等。它支持导入多种文件格式，如 .vsdx、Gliffy™ 和 Lucidchart™ 文件。

访问 draw.io 网站

kimi 的 AI 画图功能赋能

kimi 支持多达 17 种图表的 AI 绘制，其中就包括我们关注的流程图。使用方法极为简单，只需进入 kimi 官网（Kimi - 会推理解析，能深度思考的AI助手） ，在输入框中输入规范的提示词，如 “请你用 mermaid 画一个流程图。

示例

kimi也会提供直接的图片生成，会有经典和手绘两种：

我们点击下载即可得到一个png图片： 

如果对kimi生成的流程图内容不满意，但是一直调试还是问不出想要的答案，最好的方法就是放进draw.io在线绘图工具自己进行简单操作

https://app.diagrams.net/

 点击加号，高级，Mermaid...

输入想要绘制的图形，点击插入，即可生成想要的流程图

如果对图形不满意可以更改内容还有样式

Mermaid文本驱动图表在线工具

另一款好用的在线绘图工具，通过简洁的类 Markdown 语法生成专业级图表，尤其适合技术文档、项目管理和团队协作场景。

Online FlowChart & Diagrams Editor - Mermaid Live Editor 

 

Kkkika
关注
DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）
Code_流苏：在代码中寻诗意
03-09 4454
纯干货，DeepSeek结合Mermaid绘制各类图（流程图、时序图、类图、状态图、甘特图、饼图）
流程图的新语法-mermaid的快速使用--推荐
wtt234的专栏
04-12 1044
在文字编辑页面输入“三个点+mermaid”回车键入代码，要注意的是其中三个点，按键位置在Tab上面，在英文状态下输入，结尾也要有三个点。a.typora设置，选择上“图表 （序列、刘晨图和...）”把代码黏贴到这个地方就是可以看出流程图了。b.typora中输入代码的方式。
Deepseek 快速生成流程图的三种方法:附详细步骤
m0_61361390的博客
02-17 2万+
deepseek 快速生成流程图
draw.io基础操作、大模型代码高效画图和批量操作图形
风暴之灵得博客
12-29 2万+
实现方法1：鼠标放在图形边缘等待出现蓝色箭头，鼠标左键点击图形上的箭头。如果拖动其中一个图形的话，固定链接的形状会自动变为直线连接。如果拖动其中一个图形的话，固定链接的形状会是曲线连过去。鼠标放在图形上，点击出现的箭头，会自动出常用图形。点击第二张图中红圈的黄点，改变成图标的形状。上面左边出现绿圆点+鼠标左键点击图形的。2、shift+小蓝点 等比例拖动。不放+拖动链接另外一个图形的。ctrl+拖动鼠标 快速复制。ctrl+c/v 复制+粘贴。+拖动链接到另外一个图形+1.1、自动连接图形。
1分钟！用DeepSeek一键画出各种专业数据图！流程图、思维导图、甘特图立马出！
大模型研究中心
03-03 5853
DeepSeek就不过多介绍了，大家都知道，强大的AI。
drawio_mermaid_plugin:用于Drawio桌面的美人鱼插件
05-13
Draw.io Mermaid插件 这个draw.io插件集成了美人鱼图生成器。 美人鱼支持： 饼状图 顺序图 甘特图 状态图 流程图 类图 通过简单的标记语言。 概述 示例图 在线演示 用法 双击形状并编辑美人鱼脚本，离开编辑器后将重新绘制形状 特性 所有美人鱼配置选项都反映为draw.io形状属性。 Draw.io桌面 有关桌面插件，请参见 。 代码 有关vscode扩展名，请参见 。
Mermaid在线生成类图
ezsxrtghjmk的博客
03-28 3934
类图绘制工具~ 提升工作效率~
画图工具 Mermaid 学习笔记——概述
alyeska的博客
08-01 1040
此图为安装了 Mermaid Markdown Syntax Highlight 扩展（语法高亮区分）后的演示。VS Code 插件：(其他环境对应插件同样在官方文档有给出)Mermaid，一款基于markdown语法的图表绘制工具。
免费的科研论文画图软件drawio以及Mermaid
zhenglu777999的博客
05-17 5024
网址https://www.diagrams.net/https://www.diagrams.net/ B站讲解 https://www.bilibili.com/video/BV15Z4y1a7fm?spm_id_from=333.788.top_right_bar_window_default_collection.content.click
Mermaid在线生成时序图
ezsxrtghjmk的博客
08-30 1万+
参与者可以显式定义或者像上述例子一样隐式定义，显式定义语法如下participant 小李participant 小王小李->>小王: Hi 小王小王->>小李: 你好，小李//participant 是参与者的关键字，关键字后是定义的参与者名称fill:#333;小李小王Hi 小王你好，小李小李小王。
drawio_mermaid_plugin：强大的图表生成插件
gitblog_00260的博客
04-09 858
drawio_mermaid_plugin：强大的图表生成插件 drawio_mermaid_plugin Mermaid plugin for drawio desktop 项目地址: https://gitcode.com/g...
画图神器-drawio（配合markdown使用更佳）
qq_41740883的博客
05-31 2万+
之前做画图都是用https://www.processon.com/，但是这是收费的。 推荐一款免费开源非常好用的画图神器-drawio 下载地址 国外的网站下载很慢，我放了一份在蓝奏云里，没有飞行器的可以在这里下：蓝奏云下载 安装过程一直点下一步。 安装好后的界面，可以选择语言。 画图演示 第一步：创建新绘图 第二步：比如我想画个jvm方法区的图 以下4步 第三步：找个地方先保存一下这个png图片，我一般直接存放在md笔记的图片文件夹里 第四步：我咔咔一顿乱画，居然画成这样 看起来很像是我手画
Mermaid画流程图、序列图、饼图、甘特图(实例讲解)
ixiaoyang的专栏
10-22 4901
本文将介绍如何学习使用Mermaid画图。传统的可视化绘图工具，每次使用都要以图片的形式进行编辑，不便于微调，在不同应用之间切换也比较麻烦。Mermaid语法简单，改动较小，绘图更高效，更适合程序员使用。下面使用实例展示一下流程图、序列图、饼图、甘特图的绘图过程。
mermaid大全（语法、流程图、时序图、甘特图、饼图、用户旅行图、类图）
Le0v1n 的博客
01-12 8648
语法、流程图、时序图、甘特图、饼图、用户旅行图、类图
mermaid工具
热门推荐
赶路人儿
10-30 5万+
mermaid是一款开源的画流程图、甘特图、时序图工具，她提供了一种类似markdown的语法来创建各种图。 官网：https://mermaidjs.github.io/ 在线编辑器：here 1、入门 我们先试用mermaid提供的在线编辑器，来熟悉一下mermaid的各种画图语法； 1）流程图 2）时序图： sequenceDiagram A->> B: Qu...
在Markdown中用mermaid画流程图和ER图
weixin_44493841的博客
08-27 9681
在Markdown中用mermaid画流程图 mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本篇文章只介绍了mermaid中流程图在markdown的使用。 流程图方向有下面几个值 TB 从上到下 BT 从下到上 RL 从右到左 LR 从左到右 TD 同TB 示例 从上到下 ​```mermaid graph TD A --> B ​``` 效果： AB 从左到...
基于 mermaid 的在线流程图绘制方案
Dreamcatcher_yxc的博客
10-02 2980
一、项目背景 本项目是自己在公司做前端网页的时候，后端需要做一个流程控制引擎，给出了节点信息和节点之间的连接信息，老板希望根据这些信息把流程图画出来，当时自己的第一感觉就是在网上寻找开源项目，但是发现找到的大多都不是开源的，找了一天时间也没有找到比较容易上手的解决方案。 后来想着 markdown 不是能够通过代码的方式直接画流程图吗？想着能不能在前端把后端的流程图信息转换为 markdown 支持的 mermaid 定义信息直接画图呢？说干就干，于是就有了这个小项目。 二、项目使用介绍 本项目允许
Markdown mermaid种草(6)_ ER图
耳东小白的小笔记本儿
02-24 1万+
耳东小白倾情推荐，markdown绘图神器mermaid之ER图
自用网站如何接入AI大模型
最新发布
04-11
<think>好的，我现在需要帮助用户了解如何在自用网站中集成和使用AI大模型。首先，我需要理清整个流程，确保步骤清晰，并且涵盖关键点。根据用户提供的引用内容，他们可能对学习路线和资源感兴趣，但问题本身是关于实际集成的。 首先，我应该考虑用户可能的背景。他们可能拥有一个网站，但缺乏AI集成经验。因此，回答需要从基础开始，逐步引导。可能需要分步骤说明，比如选择模型、API集成、前端交互等。 接下来，我需要确保回答中包含技术细节，但不过于复杂。例如，提到使用RESTful API或预训练模型，以及代码示例。用户提供的引用中提到有实战学习资料，可能涉及代码示例，所以给出Python或JavaScript的代码片段会合适。 然后，需要考虑安全性，比如API密钥的保护，以及性能优化，如缓存和异步处理。这些都是集成时常见的问题，用户可能不会考虑到，但必须提及。 另外，用户可能需要知道如何测试和监控模型，确保集成后的效果。这部分可以包括单元测试和用户反馈机制。 最后，生成的相关问题需要围绕集成过程中的潜在疑问，比如模型选择、性能优化、定制化方法等。这些问题可以帮助用户进一步探索。 现在，我需要检查是否有遗漏的步骤，比如模型部署选项（云端vs本地），或者具体框架如TensorFlow.js的应用。同时，确保语言简洁，用中文表达，符合用户要求。 可能还需要引用用户提供的资料，比如学习路线和实战教程，但用户的问题是关于集成方法，因此引用可能需要适当链接到他们的资源，比如如何获取API密钥或使用特定工具。 总结下来，回答的结构应该是：概述步骤，分步详细说明，每个步骤的技术实现，代码示例，注意事项，以及相关问题。确保覆盖所有关键点，并且引用相关资料帮助用户深入学习。</think>### 如何在自用网站中集成和使用AI大模型 将AI大模型集成到自用网站中需要以下关键步骤，结合技术实现和实际应用场景： #### 1. **选择合适的大模型服务** - **云端API**：直接调用第三方大模型API（如OpenAI、Google Vertex AI、Hugging Face Inference API），适合快速集成且无需本地算力。 ```python # 示例：调用OpenAI API import openai openai.api_key = "your-api-key" response = openai.Completion.create( engine="text-davinci-003", prompt="生成一段产品描述：", max_tokens=100 ) ``` - **本地部署**：若数据隐私要求高，可部署开源模型（如Llama 2、BLOOM），需准备GPU服务器和框架（PyTorch/TensorFlow）[^1]。 #### 2. **设计API交互逻辑** - 使用RESTful或GraphQL接口实现前后端通信： ```javascript // 前端调用示例（React） async function generateText(prompt) { const response = await fetch('/api/ai', { method: 'POST', body: JSON.stringify({ prompt }), headers: { 'Content-Type': 'application/json' } }); return await response.json(); } ``` #### 3. **优化模型性能** - **模型压缩**：使用量化（如TensorFlow Lite）或剪枝技术减少模型体积 - **缓存机制**：对高频查询结果缓存，降低API调用次数 - **异步处理**：耗时任务通过消息队列（如RabbitMQ）异步执行 #### 4. **实现典型应用场景** - **智能客服**：集成对话模型（如GPT-3.5）实现24/7问答 ```python # 基于会话历史的连续对话 messages = [{"role": "system", "content": "你是一个客服助手"}] def chat(user_input): messages.append({"role": "user", "content": user_input}) response = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=messages ) return response.choices[0].message.content ``` - **内容生成**：自动生成文章/产品描述 - **数据分析**：集成Stable Diffusion生成营销图片 #### 5. **安全与合规** - **数据加密**：使用HTTPS传输，敏感数据端到端加密 - **访问控制**：通过OAuth 2.0实现API权限管理 - **合规审查**：遵守GDPR等数据隐私法规，记录AI决策日志 #### 6. **监控与调优** - 使用Prometheus监控API响应时间和错误率 - 通过A/B测试对比不同模型版本效果 - 定期更新模型版本（如从GPT-3升级到GPT-4） ### 完整集成架构示例 ``` 用户浏览器 → 网站前端（React/Vue） → REST API（Flask/Django） → AI模型服务 ↘ 数据库（MySQL/MongoDB） ↘ 缓存层（Redis） ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值