最新案例动态，请查阅码道智绘：让文字秒变专业图表小伙伴们快来进行实操吧！

案例简介：通过华为云码道代码智能体与excalidraw-diagram skill的有机结合，实现技术绘图的智能化场景，让开发者告别繁琐的绘图操作，专注于内容创作本身。

一、概述

1.1 案例介绍

在技术文档编写、系统设计、项目规划等场景中，绘制专业的架构图、流程图、思维导图等可视化图表是必不可少的环节。然而，传统绘图工具（如Visio、Draw.io）存在使用门槛高、操作复杂、样式调整耗时等问题。开发者需要花费大量时间学习工具操作，而非专注于内容表达；手绘风格图表难以保持一致性；不同图表类型需要切换不同工具，工作效率低下。据统计，技术人员平均每次绘制专业图表需要30-60分钟，严重影响了文档编写效率。本案例旨在通过AI智能绘图技能，让技术绘图门槛降至最低，实现"文字即图表"的高效表达。

本案例基于华为云码道（CodeArts）代码智能体，安装配置excalidraw-diagram skill，实现从文本描述自动生成专业可视化图表。该skill支持Obsidian、Standard、Animated三种输出模式，可生成流程图、思维导图、层级图、关系图、对比图、时间线图、矩阵图等多种图表类型，采用精心设计的配色方案和手绘风格，让复杂概念和系统结构的表达更加清晰直观。

案例技术选型：

• 华为云码道（CodeArts）代码智能体：集代码大模型、AI IDE、Code Agent为一体的智能编码产品。具备智能生成、智能问答、智能体模式等核心能力，支持skill扩展机制。本案例中作为核心平台，通过skill扩展快速获得智能绘图能力，大幅降低技术绘图门槛。
• excalidraw-diagram skill：基于Excalidraw的智能图表生成工具。支持从文本描述自动生成专业图表，提供手绘风格、精心配色、自动布局等特性，支持Obsidian、Standard、Animated三种输出模式。本案例中作为核心技能，实现页面设计原型图、项目架构图、业务流程图等多种图表的快速生成。

1.2 适用对象

• 个人开发者
• 高校学生
• 企业开发人员

1.3 案例时间

本案例总时长预计60分钟。

1.4 案例流程

说明：

1. 安装配置华为云码道（CodeArts）代码智能体。
2. 对话码道，下载并配置excalidraw-diagram skill。
3. 下载测试项目源码\文件，准备实操环境。
4. 对话码道，生成页面设计原型图、项目架构图、业务流程图及项目研发时间线图。
5. 将生成的Excalidraw文档复制到excalidraw.com，查看效果图。

1.5 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）
华为云码道（CodeArts）代码智能体	通用体验版	免费

二、环境和资源准备

2.1 AI IDE华为云码道安装部署

参考案例《AI IDE华为云码道（CodeArts）代码智能体安装部署》完成Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署。

2.2 配置skill

对话码道：“帮我从gitCode上下载https://gitcode.com/sinat_41661654/axton-obsidian-visual-skills/tree/main/excalidraw-diagram，并将该skill加载至当前目录项目级skill”。

等待码道自动完成excalidraw-diagram skill下载与配置，可在设置 > 技能与规则的项目级 > 技能中进行查看。

excalidraw-diagram skill：一个从文本内容自动生成专业图表的工具，可以将文本内容自动转换为美观的手绘风格图表。采用精心设计的配色方案和严格规范确保图表清晰易读，可自动保存到工作目录并支持动画导出，特别适合快速生成技术架构图、业务流程图等可视化内容，帮助清晰表达复杂概念和系统结构。

输出模式：

1. Obsidian 模式（默认）- 生成 .md 文件，可在 Obsidian 中直接打开；
2. Standard 模式 - 生成 .excalidraw 文件，可在 excalidraw.com 编辑分享；
3. Animated 模式 - 生成带动画顺序的 .excalidraw 文件，可导出为 SVG/WebM。

支持的图表类型：

• 流程图 - 步骤说明、工作流程。
• 思维导图 - 概念发散、主题分类。
• 层级图 - 组织结构、系统架构。
• 关系图 - 要素间的依赖、互动关系。
• 对比图 - 方案对照分析。
• 时间线图 - 事件发展、项目进度。
• 矩阵图 - 双维度分类、任务优先级。
• 自由布局 - 灵感记录、初步信息收集。

本案例将在下一章使用默认的 Obsidian 模式分别测试生成自由布局、层级图、流程图和时间线图。

2.3 下载测试项目

打开码道AI IDE终端窗口输入如下命令，下载测试项目源码。

git clone https://gitcode.com/sinat_41661654/asset_mgmt.git

三、Excalidraw-Diagram实战

3.1 生成页面设计原型图（ 自由布局）

打开之前下载的测试项目，在asset_mgmt\ProjectDocs\systemDesign路径下打开07-页面设计.md。在码道对话框中输入#，选择07-页面设计.md，然后发送如下对话请求：

#07-页面设计.md 
帮我识别这个文档，使用excalidraw-diagram skill为每个页面生成页面设计原型图

码道自动识别读取07-页面设计.md，摘取其中的登录页、首页概览和资产列表页，生成页面设计原型图。

注：07-页面设计.md原文中的关于登录页面描述如下：

打开码道生成的页面设计原型图，复制其中的json部分内容（注意：复制时要保证复制完整的json格式），打开excalidraw网站，将复制的内容直接在页面上进行粘贴，excalidraw自动识别并加载。

码道将原文件中的页面布局、设计说明与交互行为等内容经过加工渲染，生成如下效果：

同理，原文中的P03首页概览原型和P04资产列表原型设计如下。

3.2 生成项目架构图（层级图）

对话码道：“请识别asset_mgmt项目，并使用excalidraw-diagram skill创建清晰的项目架构图”。

码道调用SubAgent分析项目架构，并生成项目架构图，最后在excalidraw加载的效果如下：

3.3 生成业务流程图（流程图）

对话码道：“请识别asset_mgmt项目，并使用excalidraw-diagram skill创建清晰的资产变更业务流程图”。

码道调用SubAgent分析业务流程，并生成固定资产状态流转业务流程图，最后在excalidraw加载的效果如下：

3.4 生成时间线图（时间线图）

对话码道：“请识别asset_mgmt项目，并使用excalidraw-diagram skill创建清晰的项目时间线图”。

码道调用SubAgent分析项目时间线，并生成时间线图，最后在excalidraw加载的效果如下：

四、项目总结

本案例通过华为云码道代码智能体安装配置excalidraw-diagram skill，完整演示了AI驱动技术绘图的全流程实践。从环境准备、skill配置到实战应用，通过asset_mgmt项目验证了页面设计原型图、项目架构图、业务流程图、时间线图等多种图表类型的智能生成能力，展示了"文字即图表"的高效绘图模式。

核心成果：

• 绘图效率提升10倍以上：传统方式需30-60分钟学习操作并绘制，本案例通过自然语言描述2-5分钟即可生成专业图表，大幅降低技术绘图门槛。
• 多场景验证成功：成功验证了Obsidian模式，以及流程图、层级图、思维导图、时间线图等多种图表类型的适用性。
• 文档表达效率提升：excalidraw-diagram skill将复杂文字描述快速转化为清晰直观的专业图表，显著提升技术文档的表达效率和理解度。

除此之外，excalidraw-diagram skill还可以广泛应用于API接口设计、数据库建模、技术方案对比、知识体系构建、项目规划管理、文档可视化增强等场景，是技术文档编写、系统设计评审、知识沉淀和项目管理的有力助手。

至此，码道智绘：让文字秒变专业图表案例结束，各位小伙伴快来下载华为云码道（CodeArts）代码智能体体验吧！

反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！