Mermaid官网
www.mermaidchart.com
使用Mermaid的AI功能
我们来生成一个美国亚马逊站点的全年营销日历。
Prompt：Year Round Marketing Calendar for Amazon.com USA
绘图效果（由于太长了，只展现1月）：
然后我们再对其进行优化改进：
Prompt：Year Round Marketing Calendar for Amazon.com USA. Need vivid icons on main module parts.
绘图效果（增加了个性化的图标）：
继续优化改进：
Prompt：Year Round Marketing Calendar for Amazon.com USA. Need vivid icons on main module parts. Need colors for different levels of modules. The layout can be arranged by months vertically.
看下绘图效果（增加了色块，布局上要求垂直分布没有很好实现）：
当然我们可以通过白板功能来实现实时拖放式调整布局。
在历史记录中可以进行回撤追溯等等操作。
导出保存的图表类型可以是PNG或是SVG格式。
最后我们使用Claude来创建下未能垂直分布的营销日历图表。
Prompt：
Year round marketing calendar for Amazon.com USA. A rectangle form with different colors and icons would be prefer. Vivid icons are needed for the main module sections. Different colors are needed for different levels of modules. Layout should be arranged vertically by month, January should be at the top and December should be at the bottom.
绘制的图表如下：
虽然在Claude中预览正常，但是通过浏览器打开svg或html就出现显示不正常的问题。
我们将问题反馈给Claude并且进行修正。
Prompt：When open with html web browser it shows "error on line 15 at column 119: xmlParseEntityRef: no name." Please modify it.
修正后的code
将该修正后的Code保存xml文档，并使用edge浏览器直接打开文档，显示正常。
补充知识：
MermaidChart.com 的全面解析
一、MermaidChart.com 是什么网站
MermaidChart.com 是一个基于Web的图表编辑器网站。它是由Mermaid背后的团队构建的，与Mermaid有着紧密的联系，Mermaid是一种开源的文本驱动图表生成工具，而MermaidChart.com 在此基础上提供了更便捷的图表创建和编辑功能。这个网站允许用户在浏览器中创建和编辑各种类型的图表，是一个专注于图表绘制、编辑与协作的在线平台。用户可以通过创建账户来试用包括Mermaid在内的相关功能以及可视化图表套件，从而进行图表的创建、编辑、保存等操作，以满足不同的需求，如项目规划、文档制作以及执行复杂项目等相关的图表需求。
二、MermaidChart.com 的功能特点
文本驱动图表创建
MermaidChart.com 的核心功能是基于文本定义来创建视觉图表。它允许用户使用简单的文本代码来构建各种类型的图表，例如流程图、序列图、甘特图、饼图等。这种方式类似于Markdown的语法风格，简单且易于学习，对于那些熟悉文本编辑而又不想使用复杂绘图软件的用户来说非常友好。用户不需要通过传统的图形界面，使用鼠标拖拽各种图形元素来构建图表，而是在类似代码编写的过程中定义图表的结构、元素和关系，大大提高了创建图表的效率，尤其是对于一些较为复杂的图表结构，使用文本定义可以更精准地进行构建。
可视化编辑器功能
该网站提供可视化编辑器，这一功能使得不同技能水平的用户都能够轻松高效地创建图表。它同时提供了图形用户界面（GUI）和基于代码的编辑选项。对于初学者或者不太熟悉代码编写的用户来说，可以先使用GUI进行一些基本的操作，直观地看到图表的构建过程和效果，然后再逐渐学习和使用基于代码的编辑方式来进行更精细的调整。而对于有经验的用户，他们可以直接使用代码编辑来快速创建和定制图表，满足他们对于特定图表样式和功能的需求。
图表代码编辑与预览
在MermaidChart.com 的Code面板中，用户能够编写或编辑Mermaid代码，并且可以立即在图表面板中预览渲染结果。例如，用户输入一段Mermaid代码定义流程图的节点和流程关系，马上就能看到对应的流程图呈现出来。这种实时预览的功能极大地提高了用户调整图表的效率，用户可以快速地修改代码，查看效果，直到得到满意的图表为止。
配置选项
在Configuration面板中提供了配置选项，这些选项可以应用于预览面板中的图表。用户可以根据自己的需求对图表的各种属性进行配置，如颜色、样式、布局等方面的调整，使图表更加符合自己的要求或者符合项目的整体风格。
团队协作功能
该网站具有Teams功能，使用户能够创建项目并邀请成员参与。这对于团队项目来说非常有用，团队成员可以共同创建、编辑和完善图表，确保组织内部的信息共享和协作，从而提高整个团队的工作效率。在团队协作过程中，成员可以实时看到彼此的修改和更新，方便进行讨论和决策，有效地促进了项目的推进。
三、MermaidChart.com 的使用教程
注册与登录
首先，用户需要访问MermaidChart.com 网站，创建一个账户或者使用已有的账户登录。注册过程通常需要提供一些基本信息，如用户名、密码、电子邮箱等。登录后，用户就可以进入到平台的操作界面。
创建新图表
登录后，用户可以通过操作界面中的相关按钮或者菜单选项来创建一个新的图表。在创建图表时，用户可以选择不同的图表类型，例如流程图、序列图、甘特图等。根据选择的图表类型，用户将进入到相应的编辑界面。
使用可视化编辑器或代码编辑
可视化编辑器：如果选择使用可视化编辑器，用户可以在图形界面中看到各种用于构建图表的工具和元素。例如，对于流程图，用户可以看到节点、箭头等元素的添加按钮，通过鼠标点击和拖拽这些元素到合适的位置来构建图表的基本框架，然后再对每个元素进行属性设置，如添加文字说明、设置颜色等。
代码编辑：如果用户熟悉Mermaid的文本语法，也可以直接在Code面板中编写或编辑代码。例如，对于流程图，按照Mermaid的语法规则，使用“graph TD”（表示自上而下的流程图）等语句开始定义节点和流程关系，如“A[Enter Chart Definition] --> B(Preview)”这样定义节点A和节点B之间的箭头关系。在编写代码的过程中，用户可以随时参考Mermaid的语法文档来确保代码的正确性。
实时预览与调整
在编写代码或者使用可视化编辑器进行操作的过程中，用户可以实时在图表面板中看到图表的预览效果。如果发现图表不符合预期，例如节点的布局不合理、箭头的方向错误等，用户可以及时进行调整。对于代码编辑来说，修改代码后，预览效果会自动更新；对于可视化编辑器，用户可以直接在图形界面中拖动元素或者修改属性来调整图表。
保存与分享图表
当用户完成图表的创建和编辑后，可以将图表保存到自己的账户下。在保存时，用户可以为图表命名，方便以后查找和管理。此外，用户还可以将图表以不同的格式（如图片格式、代码格式等）分享给他人，或者直接通过链接分享给团队成员或者其他相关人员，以便于在项目中使用或者进行展示。
四、MermaidChart.com 的用户评价
积极方面
简洁易用的文本驱动方式：许多用户赞赏MermaidChart.com 使用文本驱动创建图表的方式，这种方式类似于Markdown，对于熟悉文本编辑的用户来说很容易上手。用户可以快速地将自己的想法转化为图表代码，而不需要花费大量时间学习复杂的绘图工具操作。例如，一些程序员或者经常处理文档编写的人员，他们可以在编写项目文档的过程中，很方便地使用MermaidChart.com 的文本语法插入图表，提高文档的可视化效果。
可视化编辑器与代码编辑的结合：可视化编辑器和代码编辑选项的同时提供，满足了不同用户群体的需求。对于初学者来说，可视化编辑器可以帮助他们快速入门，直观地了解图表的构建过程；而对于有经验的用户，代码编辑能够实现更精细的定制。这种双重编辑模式被认为是一个很大的优势，让用户可以根据自己的技能水平和需求在两者之间灵活切换。
团队协作功能：团队协作功能受到了一些团队用户的好评。在项目中，团队成员可以方便地共同创建和编辑图表，实时共享信息。这有助于提高团队的沟通效率，减少因为图表版本不一致或者信息不及时更新而带来的问题。例如，在一个项目规划阶段，不同部门的成员可以通过MermaidChart.com 的团队协作功能，共同构建项目的流程图、甘特图等，明确项目的流程和进度安排。
有待改进方面
图表复杂度的限制：有部分用户认为，MermaidChart.com 在创建复杂图表时可能会存在一些限制。例如，对于一些非常复杂的业务架构图或者大型系统的技术架构图，在表示细节和关系的完整性上可能不够理想。相比一些专业的绘图软件，MermaidChart.com 在处理大规模、高度复杂的图表时可能需要进一步提升功能。
功能的丰富度相对有限：与一些功能强大的综合绘图工具相比，MermaidChart.com 的功能相对较为单一。虽然它专注于基于文本的图表创建，但在一些特殊功能方面，如3D图表绘制、高级动画效果等方面可能无法满足部分用户的特殊需求。
五、MermaidChart.com 与类似网站的比较
与PlantUML的比较
语法和易用性
PlantUML使用一种类似于编程语言的语法，对于程序员来说可能更容易上手，它提供了丰富的语法来创建多种类型的UML图。而MermaidChart.com 基于Mermaid的语法更加简洁和近似自然语言，可能对于非程序员或者想要快速绘制基本图表的用户来说更易于理解和使用。例如，对于一个非技术人员想要绘制一个简单的流程图来表示工作流程，MermaidChart.com 的语法会更容易掌握；但对于一个专业的软件工程师绘制复杂的UML类图，PlantUML的语法可能更符合他们的编程思维习惯。
图表类型
PlantUML支持广泛的UML图类型，包括序列图、用例图、类图、活动图、组件图、状态图和对象图等。MermaidChart.com 同样支持多种图表，包括流程图、时序图、甘特图和类图等，但种类不如PlantUML丰富。不过，对于大多数文档说明和一般性的项目需求，MermaidChart.com 所支持的图表类型已经足够使用。
集成和兼容性
PlantUML可以作为独立的Java应用运行，也可以集成到各种IDE中，并且与许多其他工具兼容，如GitLab、Confluence、VS Code等。MermaidChart.com 以JavaScript库的形式提供，易于集成到基于Web的应用和Markdown编辑器中，GitHub README文件和许多Markdown编辑器原生支持Mermaid（Mermaid是MermaidChart.com 的基础）。例如，如果用户主要在Web开发环境中工作，并且经常使用Markdown文件进行文档编写，MermaidChart.com 会更方便集成到工作流程中；而如果用户主要在Java开发环境中，并且依赖于特定的IDE，PlantUML可能是更好的选择。
定制和扩展性
PlantUML提供了丰富的自定义选项，包括颜色、样式和布局，允许用户调整图表以符合特定需求。MermaidChart.com 虽然也支持定制，但可能在某些方面不如PlantUML灵活。例如，在对图表的颜色进行复杂的渐变设置或者对特定元素的样式进行高度定制时，PlantUML可能会有更多的操作空间。
渲染方式
PlantUML通常需要服务器端的组件来生成图表，或者需要安装本地的PlantUML二进制文件和Graphviz工具。而MermaidChart.com 作为客户端JavaScript库，可以在不需要服务器端处理的情况下直接在浏览器中渲染图表，这使得MermaidChart.com 在使用上更加便捷，不需要额外的服务器端配置或者本地工具安装。
与其他可视化工具（如seaborn）的比较
应用场景
seaborn是为了统计图表设计的，它是一种基于matplotlib的图形可视化库，主要用于数据的统计分析和可视化展示，例如绘制柱状图、折线图、散点图等统计图表。而MermaidChart.com 主要用于创建各类流程、关系等逻辑结构的图表，如流程图、序列图等。两者的应用场景有很大的区别，seaborn适用于数据分析领域，展示数据之间的数值关系和分布情况；MermaidChart.com 适用于项目管理、流程规划、系统架构等领域，展示元素之间的逻辑关系。
数据来源与交互性
seaborn通常与Python中的数据结构（如DataFrame等）进行交互，从数据中提取信息来绘制图表，并且可以通过调整数据来改变图表的显示。MermaidChart.com 更多地是基于用户定义的文本逻辑来创建图表，与数据的交互性较弱。例如，在一个数据分析项目中，使用seaborn可以根据不同的数据集快速生成不同的统计图表进行分析；而在一个项目流程规划中，MermaidChart.com 则根据用户对流程步骤和关系的定义来构建流程图。
需要更多免费AI工具、最新Ai信息、详细使用和丰富Ai教程、Ai变现方法的小伙伴可以加入路上侠客的知识星球，一年会员，原价199元，现在只需99元。
