入门：构建您的第一个交互式 JavaScript 图表
I’m happy to translate the article for you, but I need the actual text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source line exactly as it is and preserve all formatting, code blocks, URLs, and technical terms as requested.
概览
在本指南中，我们将一步步演示如何从零构建一个简洁却功能强大的 JavaScript 绘图应用。以下是您将创建的内容预览：
我们完成的应用将使用 MindFusion JavaScript Diagram 库 来实现以下功能：
- 通过拖拽创建流程图形状。
- 实时自定义节点和连线的颜色。
- 直接在图形元素内编辑文本。
- 将当前图表保存为文件并重新加载。
准备好了吗？让我们开始吧！
设置项目
为了节省时间，我们将在现成的 MindFusion 启动项目 基础上进行构建。它提供了一个预先配置好的 vanilla JavaScript 环境，作为坚实的起点。
首先，从 GitHub 克隆项目并启动开发服务器：
# Clone the repository
git clone https://github.com/MindFusionComponents/diagram-starter-vanilla
# Navigate into the project directory
cd diagram-starter-vanilla
# Install dependencies
npm install
# Start the local server
npm start运行后，你将看到基本的启动应用程序，其中包括图表画布、概览面板、形状调色板和缩放控制。
后端是一个简单的 Express 服务器（server.js），用于提供静态文件。我们的主要工作将在 index.html 和 index.js 前端文件中进行。
初始化图表组件
图表及其相关 UI 组件在 index.js 中进行初始化。每个组件都绑定到 index.html 中的一个 HTML 元素（<canvas> 或 <div>）。
例如，主 DiagramView 通过关联 ID 为 "diagram" 的 <canvas> 元素来创建：
// create a DiagramView component that wraps the "diagram" canvas
var diagramView = MindFusion.Diagramming.DiagramView.create(document.getElementById("diagram"));
var diagram = diagramView.diagram;同样，Overview 和 Palette 组件也分别链接到对应的元素：
// create an Overview component
var overview = MindFusion.Diagramming.Overview.create(document.getElementById("overview"));
overview.diagramView = diagramView;
// The Palette component lets users create shapes via drag‑and‑drop
var palette = MindFusion.Diagramming.Controls.Palette.create(document.getElementById("palette"));我们可以轻松地向调色板添加预定义形状。下面的代码添加了一个 Flowchart Shapes（流程图形状）类别，并填充了常用的形状，如 Start、Input、Process 和 Decision。
palette.addCategory("Flowchart Shapes");
var shapes = ["Start", "Input", "Process", "Decision"];
for (var i = 0; i < shapes.length; i++) {
// Add each shape to the palette (implementation details omitted)
}(后续实现细节请参见原指南。)
自定义节点外观
我们随后监听这些输入框的 change 事件。当选择了新颜色后，更新全局变量并将新颜色应用到 所有当前选中的节点。
// Global variable for the default node brush color
let defaultNodeBrushColor = '#e0e9e9';
// Get the color‑picker element
const nodeColorPicker = document.getElementById('nodeColorPicker');
// Update the default color when the picker changes
nodeColorPicker.addEventListener('change', (event) => {
defaultNodeBrushColor = event.target.value;
// Apply the new color to every selected node
diagram.selection.nodes.forEach(node => {
node.brush = defaultNodeBrushColor;
});
});为了确保 新创建的节点 也使用此颜色，处理 nodeCreated 事件：
// Apply the default style to nodes as they are created
diagram.nodeCreated.addEventListener((sender, args) => {
args.node.brush = defaultNodeBrushColor;
// …apply other default style properties here…
});专业提示： 处理
nodeCreating事件可以在用户绘制节点时提供实时预览，从而获得更流畅的体验。
自定义链接外观
默认情况下，routeLinks 属性已启用，这会使链接自动创建垂直段，以避免穿过节点。
我们还可以控制链接的头部形状。在我们的应用中，一个复选框决定链接是否具有 “Triangle”（三角形）箭头或没有。将 headShape 属性设置为 null 可以移除箭头。
let defaultLinkHeadShape = 'Triangle';
const linkHeadCheckbox = document.getElementById('linkHeadCheckbox');
// Update the default head shape when the checkbox changes
linkHeadCheckbox.addEventListener('change', (event) => {
defaultLinkHeadShape = event.target.checked ? 'Triangle' : null;
// Apply the change to all selected links
diagram.selection.links.forEach(link => {
link.headShape = defaultLinkHeadShape;
});
});使用锚点模式实现整洁的连接
为了让图表看起来更整洁，我们通过使用 AnchorPattern 来限制链接可以连接到节点的哪些位置。锚点模式是一组在节点表面上以相对坐标（0‑100）定义的 AnchorPoint 对象。
下面的模式仅允许在四个边的中心进行连接：
// Define an anchor pattern that snaps to the middle of each side
const nodeAnchorPattern = new AnchorPattern([
new AnchorPoint(50, 0, true, true), // Center Top
new AnchorPoint(100, 50, true, true), // Center Right
new AnchorPoint(50, 100, true, true), // Center Bottom
new AnchorPoint(0, 50, true, true) // Center Left
]);
// Later, when creating a node…
node.anchorPattern = nodeAnchorPattern;
应用此模式后，链接会精准地吸附到这些连接点。
创建初始图表
为了给用户提供一个有用的起点，我们在页面首次加载时创建一个简单的决策图。diagram.factory 对象简化了节点和连线的创建。
// Create a start node using the factory
const startNode = diagram.factory.createShapeNode(95, 10, 30, 15);
startNode.text = "Start";
startNode.shape = 'Ellipse';
startNode.brush = "#DB3955";
startNode.textColor = "#f0f0f0";
startNode.anchorPattern = nodeAnchorPattern;使用工厂创建的节点会自动添加到图表的 items 集合中。
视频教程
本教程还有视频版本。请点击这里观看：
我真心希望本指南能帮助你开启交互式 JavaScript 图表的旅程！如果你有任何问题、遇到困难，或想分享你的作品，请在下方留言。我很期待听到你的反馈。
结论
就这样！您已经构建了一个功能丰富的 JavaScript 图表应用程序：
- 从基本模板开始
- 添加了自定义形状和实时样式
- 实现了锚点以获得整洁的连接
- 提供了预定义的初始图表
您可以在此处下载此项目的最终版本：
diagram-starter-2026.zip
祝编码愉快！