如何用Typora画甘特图

假设你是一个悲催的研究生,组里突然来了个项目让你画一个甘特图,但是在此之前你连甘特图是什么都不知道,那么,此时的你应该如何是好......

那当然是用支持画图的大模型帮我画图

本文章将会总结一下怎么用Typora画一个简单并且效果不错的甘特图,这里用到的Typora为1.9.5版本,没有安装Typora的可以按照b站的视频去试试,我找的这个:点此跳转。

叠甲,因为我也是初学者,所以可能有些高级用法没用上,见谅。

PS:实际过程中我发现,不下载Typora其实也可以,因为DEEPSEEK就能直接运行这个代码,直接把完成了的代码贴上去让它输出图就好。

1.甘特图是什么

甘特图是一种项目管理的条形图工具,用于直观展示项目的时间安排与进度,给出一个例子:

2.Typora的设置

这里的Typora是1.9.5版本,在画甘特图前,需要保证"文件→偏好设置→Markdown→Markdown扩展语法→图表(序列图、流程图和Mermaid图)"已经被勾选,如下图所示:

3.模板

Typora新建一个文件,先输入"```mermaid"然后回车,把Mermaid代码块标记打出来,然后把然后把下面的代码粘贴到这个代码块中。

bash 复制代码
%% "barHeight"调整一个bar的高度,"barGap"调整bar之间的间距
%% "{left/right}Padding"调整左右预留的宽度
%% "fontSize"调整bar内字体的大小,"sectionFontSize"调整标题字体大小
%% .tick text里的font-size控制坐标轴日期文字大小
%% text.titleText里的font-size控制大标题文字大小
%% "theme"调整表的风格,内置主题有"default","neutral","dark","forest","base"五个选项
%%{init: {
  "gantt": {
    "barHeight": 30,
    "barGap": 4,
    "leftPadding": 100,
    "rightPadding": 20,
    "fontSize": 14,
    "sectionFontSize": 16,
    "theme": "default"
  },
  "themeCSS": "g.tick text,.tick text{font-size:20px !important;}text.titleText{font-size:32px !important;}"
}}%%

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    %% 这个控制是否标记当天的日期,开启会在当天日期上出现一条红色竖线
    todayMarker off
    
    section 产品设计
    %% 可以用"起始时间,结束时间",也可以用"起始时间,持续天数",两者等价
    %%市场调研     :des1, 2024-01-01, 2024-01-11
    市场调研     :des1, 2024-01-01, 10d
    
    产品规划     :des2, after des1, 7d
    原型设计     :des3, after des2, 6d
    
    section 技术研发
    技术选型     :tech1, after des3, 6d
    架构设计     :tech2, after tech1, 7d
    核心开发     :tech3, after tech2, 21d
    性能优化     :tech4, after tech3, 6d
    
    section 质量保障
    测试计划     :qa1, after tech2, 6d
    测试执行     :qa2, after tech3, 10d
    验收测试     :qa3, after qa2, 6d

接下来调整参数,达到满意的情况即可,如果有些设置,比如字体颜色之类的,这个模板里没有,可以让大模型帮你修改添加一些参数。

最后的效果如下图所示:
01/07 01/14 01/21 01/28 02/04 02/11 02/18 02/25 03/03 03/10 市场调研 产品规划 原型设计 技术选型 架构设计 核心开发 测试计划 性能优化 测试执行 验收测试 产品设计 技术研发 质量保障 项目计划

相关推荐
程序员zgh7 天前
类AI技巧 —— 文字描述+draw.io 自动生成图表
c语言·c++·ai作画·流程图·ai编程·甘特图·draw.io
仰望.9 天前
vue 甘特图 vxe-gantt 如何实现标记删除数据,显示标记删除后行效果,获取已标记的行数据
vue.js·甘特图·vxe-ui
weixin_4657909115 天前
T型与NPC型三电平SVPWM的拓扑切换与算法生成技术研究,实时优化大小扇区与时间分配,实现1...
甘特图
AC赳赳老秦16 天前
汽车制造:DeepSeek辅助设备故障预测与停机时间降低方案
信息可视化·汽车·流程图·甘特图·memcached·智能电视·deepseek
daols8816 天前
vue 甘特图 vxe-gantt table 可视化依赖线的使用,可视化拖拽创建连接线的用法
vue.js·甘特图·vxe-table
CodeCraft Studio17 天前
【工业行业案例】DHTMLX Gantt 助力法国 Zozio 打造工业生产智能排程平台
甘特图·dhtmlx·gantt·工业图表·工业排程·工业排程系统开发
qtvb198718 天前
推荐一款在线或本地安装的思维导图流程图制作软件
流程图·甘特图·思维导图
AC赳赳老秦19 天前
动态可视化报告制作:DeepSeek+Mermaid生成交互式流程图/甘特图
信息可视化·rabbitmq·流程图·甘特图·memcached·memcache·deepseek
chenhdowue19 天前
vue 甘特图 vxe-gantt 任务里程碑和依赖线的使用
vue.js·甘特图·vxe-ui·vxe-gantt