实训指导书 任务名称 4.1AI工作百宝箱.docxVIP

实训指导书

任务名称4.1AI工作百宝箱

专业班级

班级序号姓名教师姓名

实训目标

掌握Mermaid工具的基本语法，能够生成思维导图和流程图。

学习使用HTML和JavaScript创建动态数据图表，如柱状图、折线图、桑基图等。

通过实际案例操作，提升数据可视化的设计与分析能力。

实训内容

1.使用Mermaid工具生成思维导图和流程图，理解其语法和应用场景。

2.利用HTML和JavaScript创建组合数据图表（柱状图+折线图），并优化图表样式。

3.通过桑基图和旭日图展示复杂数据关系，掌握数据分层的可视化方法。

实训环境及方案

1.硬件环境：计算机（Windows/macOS操作系统）、浏览器（Chrome/Firefox）。

2.软件工具：DeepSeekChat、Mermaid编辑器、文本编辑器（如VSCode）、Excel。

3.实训方案：通过分步操作完成六种数据可视化图表的生成与分析。

实训要求

1.严格按照实训步骤操作，确保生成的图表符合标准且功能完整。

2.记录操作过程中的关键步骤和遇到的问题，并总结解决方法。

3.实训完成后提交生成的图表文件及操作文档。

实训步骤

方法1思维导图：快速梳理知识结构

思维导图是用图形化树状结构梳理复杂信息的工具，可用“中心主题一分支关键词一关联线”的形式展示关键信息。思维导图的核心要素包括用醒目图标或文字呈现的主题，以及主要分支、细化层级。在思维导图中，可以用颜色图标、线条粗细等区分信息层级。

思维导图可以直观展示原本需要使用大量文字才能描述清楚的逻辑关系达到提高记忆效率、激发联想创意的目的。Mermaid是一款优秀的图表绘制工具，允许用户使用简单的文本语法创建各种类型的图表，包括流程图、序列图、甘特图、类图、状态图、饼图、思维导图等。Mermaid不仅支持实时预览，还支持在编写过程中随时查看图表效果。使用Mermaid生成的图表能够继续生成链接，并导出为图片或者SVG格式的矢量图形。

步骤1、打开deepseek，输入提示词。

提示词：请提供一份备考公务员的思维导图框架。

步骤2、确认无误后，在DeepSeek对话框中发送如下提示词，要求它生成Mermaid代码。

提示词：请根据以上框架，生成符合Mermaid标准的代码。

步骤3：在浏览器中打开Mermaid编辑器，复制deepseek的提示词，生成思维导图。

方法2流程图：复杂流程的极简呈现

流程图是由标准化图形符号和文字说明共同构成的视觉化图表，主要用于展示工作流程、算法执行顺序、系统交互关系、业务审批路径等内容。使用流程图，能够将复杂流程转化为直观图表，快速定位流程瓶颈和冗余环节，统业务操作规范，提高跨部门沟通效率。

步骤1、在DeepSeek对话框中发送以下提示词。

提示词：我们的报销流程:首先，提交报销申请、填写费用报销单;其次，进入审批流程，其中，5000元及以下金额需要部门领导审批，5000元以上金额需要财务总监审批最后，进入票据审核流程，审核通过，财务付款，否则需要修改费用报销单。请根据以上流程，生成符合Mermaid标准的流程图代码。

步骤2、在浏览器中打开Mermaid编辑器，复制deepseek的提示词，生成流程图。

方法3动感组合数据图表

桂状图适合用于对比不同类别的数值，折线图适合展示数据随时间载变量的变化而变化的趋势，二者组合使用，可用一张图表同时满足数据观趋势分析的需求。当两组数据的单位或量级差异较大时，比如销售额与和百分比,可以用主/次坐标轴分别呈现柱状图和折线图,避免数据被压缩或特此外，使用组合图表，还可以观察到两个变量的潜在关联

HTML是用于创建网页和网页应用的标准标记语言，允许通过使用一系元素结构化内容,使得文本、图像、视频等多媒体元素在网络上得以展示和交百HTML文档由一系列标签定义，这些标签用于指示浏览器如何渲染页面中的容。

JavaScript(简称JS)是一种编程语言，主要用于为网页添加交互性的动态功能，可以让网页响应用户的操作，比如单击按钮、提交表单、加载数据。S可以直接嵌人HTML，也可以通过外部文件引人。

步骤1、复制Excel工作表中的数据，粘贴到DeepSeek对话框中并发送以下提示词。

提示词：

店面

销售额（万元）

完成比例

A店

600

80%

B店

750

75%

C店

680

96%

D店

800

80%

E店

720

93%

请使用以上数据，生成柱状图加折线图的组合图表代码，符合HTML标准，配