掘金 人工智能 06月30日 12:14
谷歌高调宣布,Gemini 2.5 Pro正式版,绘制常见图表(折线图、柱状图、PPT等),国内直接使用
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

对于程序员而言,绘制图表是日常工作的重要组成部分,例如系统架构图、流程图、思维导图等。本文介绍了利用Gemini 2.5 Pro等AI工具,通过PlantUML、HTML5 Canvas、Mermaid等技术,快速生成各种图表,极大地提高了绘图效率,使程序员能够更专注于核心工作,并提供了具体的应用案例,如绘制UML类图、时序图、商务海报、系统架构图和饼状图。

💡 PlantUML是一个基于文本的图形绘制工具,程序员可以使用简单的文本语法创建UML图和技术图表,支持多种格式,例如PNG、SVG、PDF等。该工具特别适合绘制复杂的时序图和系统架构图。

🎨 HTML5 Canvas是HTML元素,允许通过JavaScript绘制图形,可以用于创建各种数据可视化图表、游戏图形、地图可视化、实时图表、艺术创作和UI组件。它基于像素的位图绘制,支持2D和3D绘图上下文,具有高度定制化和良好的性能。

📊 Mermaid是一个基于JavaScript的图表生成工具,通过简单的文本语法在网页中创建各种图表和流程图,支持SVG、PNG、PDF等输出格式。Mermaid原生支持GitHub、GitLab、Notion和Markdown编辑器,非常适合用于绘制流程图、序列图、类图、思维导图等。

对于程序员来说,画各种图表就像吃饭一样常见。

比如要向领导汇报工作时需要画系统架构图,写技术文档时要画流程图,开会讨论想法时要画思维导图等等。

会不会画图、画得好不好,往往能看出一个程序员的专业功底如何。

作为一个资深码农,我画图还是很老六的。

通过上面这几种方式,动手画图真的很麻烦,画一个复杂一点的系统架构图就得花好几个小时,画完了还要来回修改调整,非常耗时耗力。

但现在不一样了!有了Gemini 2.5 Pro,你只需要喝杯茶的时间,AI就能帮你把图画得又快又好,而且看起来还特别专业,完全不输人工画的效果。

一、基于文本的图形绘制工具PlantUML

PlantUML是一个开源工具,通过简单的文本语法来创建各种UML图和技术图表。

支持PNG、SVG、PDF、LaTeX等多种格式。

支持IDE插件、在线编辑器、文档系统集成

UML图表类型应用场景
用例图描述系统功能和用户交互
类图展示类之间的关系和结构
序列图系统交互、API调用时序
活动图描述业务流程和工作流
状态图展示对象状态变化
组件图显示系统组件关系
部署图描述系统部署架构
对象图展示特定时刻的对象实例
其他图表类型应用场景
思维导图知识整理、头脑风暴
甘特图项目进度管理
网络图网络拓扑、架构图
线框图UI原型设计
Git分支图版本控制流程
JSON数据图数据结构展示
YAML数据图配置文件结构
时序图增强版复杂交互流程

请用 PlantUML 语法帮我画一个在Java中实现一个简单的用户登录功能的类图。

复制Gemini给出的plantuml代码,打开plantuml官网。

PlantUML 还适合画复杂的时序图和系统架构图。

请用 PlantUML 语法帮我画一个在Java中的一个简单的用户登录功能的时序图

国内直接使用Gemini 2.5 pro

无需魔法、不需要国外邮箱、不需要绑定信用卡、不需要20美元/月。

使用地址:www.nezhasoft.cloud

还包含了ChatGPT4o、o4-mini-high、o3、GPT4.5、GPT4.1、Gemini 2.5 Pro 0605、Claude Sonnet 4、DeepSeek R1 0528、Grok3 thinking等模型。

二、HTML5 Canva

HTML5 Canvas是一个HTML元素,提供了通过JavaScript绘制图形的画布,基于像素的位图绘制,支持2D绘图上下文和WebGL 3D绘图上下文。

适合绘制的图形类型具体应用优势
数据可视化图表柱状图、折线图、饼图、散点图、热力图高度定制化,性能好
游戏图形2D游戏、简单3D游戏、像素游戏实时渲染,帧率控制好
地图可视化自定义地图、数据叠加、路径绘制灵活的地理信息展示
实时图表股票走势图、监控仪表盘、实时数据高频数据更新
艺术创作生成艺术、数学图形、分形图案算法绘图能力强
UI组件自定义控件、图标、按钮效果完全自定义的视觉效果

请用 HTML5 Canvas 创建一个商务风格的宣传海报:

主题:小米su7 ultra大定

文字内容:小米公司 Logo、产品名称、核心卖点、售价52.99万起

布局:分3页,每一页左右布局,左侧是图片、右侧是文字,第1页展示汽车外观,第2页展示汽车内饰,第3页展示汽车售价和优惠情况

核心图片:左侧的图片是具体的本地图片

颜色:蓝白配色方案,体现专业感

格式:高分辨率海报

复制Gemini 2.5 Pro给出的html代码到文件里,直接双击打开:

用 draw.io 格式生成图书管理系统系统架构图,系统架构结构:

复制Gemini 2.5 Pro生成的xml到.drawio文件。

三、图表生成工具Mermaid

Mermaid是一个基于JavaScript的图表生成工具,通过简单的文本语法在网页中创建各种图表和流程图。

输出格式为SVG、PNG、PDF(通过工具转换)。

原生支持GitHub、GitLab、Notion、Markdown编辑器。

UML图表类型应用场景
流程图业务流程、算法逻辑、决策树
序列图系统交互、API调用时序
类图面向对象设计、数据模型
状态图状态机、生命周期管理
ER图数据库设计、实体关系
专业图表类型应用场景
思维导图知识整理、头脑风暴
甘特图项目进度、任务规划
Git分支图版本控制流程
饼图数据占比展示
需求图需求管理、追溯性
C4图系统架构设计
时间线图历史事件、项目里程碑
象限图优先级分析、决策矩阵
XY图表数据可视化、趋势分析

请用 Mermaid 画一个用户定时秒杀商品的时序图

复制Gemini 2.5 Pro给出的mermaid代码到typora

换成之前的我,画这个图,大概可能需要半个小时,而且还必须全神贯注、可能还会出错。

用Gemini 2.5 Pro只需要一个简单的提示词,最要命的是,它生成的mermaid代码,我们自己还可以进行校对、修改,以达到我们需要的时序图。

用 Mermaid 根据下面数据做一个饼状图

市场部,320
研发部,450
人事部,150
财务部,130
客服部,200
行政部,100

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

PlantUML HTML5 Canvas Mermaid AI绘图 程序员工具
相关文章