시작하기: 첫 번째 인터랙티브 JavaScript 다이어그램 만들기
I’m ready to translate the article for you, but I need the text of the article itself. Could you please paste the content you’d like translated (excluding the source line you already provided)? Once I have the full text, I’ll keep the source link at the top and translate the rest into Korean while preserving all formatting, markdown, and technical terms.
Overview
이 가이드에서는 처음부터 최소하지만 강력한 JavaScript 다이어그램 애플리케이션을 만드는 단계를 차근차근 살펴봅니다. 여러분이 만들게 될 앱을 미리 살펴보세요:
완성된 앱은 MindFusion JavaScript Diagram library를 사용하여 사용자가 다음을 할 수 있도록 합니다:
- 드래그‑앤‑드롭으로 흐름도 모양 만들기.
- 실시간으로 노드와 링크 색상 맞춤 설정.
- 다이어그램 요소 내에서 텍스트 직접 편집.
- 현재 다이어그램을 파일로 저장하고 다시 불러오기.
준비되셨나요? 바로 시작해봅시다!
프로젝트 설정
시간을 절약하기 위해, 이미 준비된 MindFusion의 스타터 프로젝트를 기반으로 작업합니다. 이 프로젝트는 사전 구성된 바닐라 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');
// 체크박스 상태가 바뀔 때 기본 머리 모양을 업데이트
linkHeadCheckbox.addEventListener('change', (event) => {
defaultLinkHeadShape = event.target.checked ? 'Triangle' : null;
// 선택된 모든 링크에 변경 적용
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
즐거운 코딩 되세요!