架构设计器 - 用于创建系统架构图的交互式工具

交互式系统架构设计器

功能概述

本示例提供用于创建和编辑系统架构图的交互式设计器工具。用户可以添加、删除和连接组件，调整布局，并导出生成的架构。它演示了拖放节点放置、内联编辑和实时架构验证。

核心特性实现

组件面板

const componentTypes = [
    { type: 'service', icon: 'server', label: 'Service' },
    { type: 'database', icon: 'database', label: 'Database' },
    { type: 'queue', icon: 'queue', label: 'Message Queue' },
    { type: 'cache', icon: 'cache', label: 'Cache' }
];

拖放创建

const onCanvasDrop = (e: DragEvent) => {
    const componentType = e.dataTransfer.getData('componentType');
    const newNode = {
        id: `node-${Date.now()}`,
        type: componentType,
        x: e.offsetX,
        y: e.offsetY
    };
    graphInstance.addNodes([newNode]);
};

连接创建

const startConnection = (nodeId: string) => {
    connectingFromRef.current = nodeId;
};

const completeConnection = (targetNodeId: string) => {
    if (connectingFromRef.current) {
        graphInstance.addLines([{
            from: connectingFromRef.current,
            to: targetNodeId
        }]);
        connectingFromRef.current = null;
    }
};

架构验证

const validateArchitecture = () => {
    const nodes = graphInstance.getNodes();
    const lines = graphInstance.getLines();

    // 检查孤立节点
    const connectedNodes = new Set();
    lines.forEach(line => {
        connectedNodes.add(line.from);
        connectedNodes.add(line.to);
    });

    const orphaned = nodes.filter(n => !connectedNodes.has(n.id));
    return { valid: orphaned.length === 0, warnings: orphaned };
};

创意使用场景

架构规划：在实施前设计系统架构。

文档工具：创建保持同步的动态架构图。

团队协作：多个工程师同时编辑架构。

架构审查委员会：拟议变更的交互式演示。

迁移规划：设计目标架构并规划迁移路径。