需借助外部工具将HubSpot AI客户旅程转为交互式图表：一、导出JSON结构化数据；二、用Mermaid Live Editor生成可点击SVG；三、在HubSpot CMS嵌入GoJS动态图表；四、通过Miro API同步构建协作画布。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
如果您希望将HubSpot AI生成的客户旅程内容转化为具备点击、悬停、路径跳转等行为的交互式图表，而非静态图像或线性列表，则需借助外部可视化工具与HubSpot数据导出能力协同实现。以下是实现该目标的具体路径：
一、导出HubSpot AI客户旅程原始结构数据
HubSpot AI在“客户旅程”模块中生成的节点与触点关系默认以文本逻辑呈现，需先提取其层级结构与属性字段，为后续可视化提供结构化输入。
1、进入HubSpot账户，导航至营销 > 客户旅程 > 选择已生成的AI旅程。
2、点击右上角“导出”下拉菜单 > 选择“导出为JSON”（若无此选项，则使用浏览器开发者工具复制Network标签中journey-definitions API响应体）。
3、保存返回的JSON文件，确认其中包含stages、actions、transitions及conditions等关键数组字段。
二、使用Mermaid Live Editor嵌入可交互流程图
Mermaid支持通过代码实时渲染带点击事件的SVG图表，配合轻量JavaScript可激活节点跳转与状态高亮，无需部署后端服务。
1、访问mermaid.live在线编辑器。
2、将导出的JSON中各阶段名称与连接关系转换为Mermaid语法，例如：stageA -->|点击邮件| stageB，并为每个节点添加click声明指向对应HubSpot资源URL。
3、在编辑器底部启用“Interactive mode”开关，预览悬停提示与点击跳转效果。
4、点击“Export as SVG”下载矢量图，或复制HTML embed代码嵌入内部知识库页面。
三、在HubSpot CMS内嵌入GoJS动态图表
GoJS是专为复杂关系图设计的JavaScript库，支持拖拽布局、实时数据绑定与自定义节点模板，可直接消费HubSpot API返回的旅程JSON。
1、在HubSpot CMS文件管理器中上传GoJS核心库文件go.js及自定义journey-diagram.js脚本。
2、创建新CMS页面，在HTML模块中插入容器元素：<div id="myDiagramDiv" style="width:100%;height:600px;border:1px solid black;"></div>。
3、在页面底部脚本中调用HubSpot REST API端点/crm/v3/objects/contacts/{contactId}/associations/engagements获取当前联系人实际旅程轨迹，并映射至GoJS节点data属性。
4、为每个节点设置click事件处理器，执行window.open()跳转至对应邮件模板预览页或表单提交记录。
四、利用Miro白板API同步构建协作式旅程画布
Miro提供公开API与嵌入SDK，可将HubSpot旅程节点作为卡片自动同步至白板，支持团队成员实时标注、添加评论及关联外部文档。
1、在Miro开发者控制台创建新应用，获取client_id与client_secret，并配置OAuth重定向URI为HubSpot站点域名。
2、使用HubSpot工作流触发器，在AI旅程发布时调用Miro API POST /v2/boards/{boardId}/items，为每个阶段创建独立卡片，卡片描述字段填入该阶段触发条件与预期结果。
3、在Miro白板中启用“Present mode”，观众点击任意卡片即可展开详情面板，面板内嵌HubSpot联系人视图iframe。
4、将生成的白板链接以embed形式插入HubSpot知识库文章，设置allow="fullscreen"参数启用全屏交互。
