공정도를
드래그앤드롭으로 설계합니다.
Design process graphics
by drag and drop.
밸브 · 펌프 · 파이프 · 탱크 · 커넥터 등 DCS 설비 도형을 캔버스에 드래그해 배치하고, RTDB 태그와 즉시 바인딩하는 웹 기반 그래픽 편집기. HTML5 · CSS · JS 로 사용자 정의 도형과 애니메이션을 자유롭게 확장합니다. A web-based graphic editor: drag DCS shapes (valves, pumps, pipes, tanks, connectors) onto the canvas and bind them to RTDB tags instantly. Extend with custom shapes and animations in HTML5, CSS, and JavaScript.
엔지니어를 위한 편집기,
웹에서.
An editor built for engineers,
in the browser.
공정 흐름도를 그리는 실제 워크플로우에 맞춘 8가지 편집 기능. RTDB 전용 도형부터 이력 복원까지. Eight authoring capabilities shaped by real process-graphic workflows, from RTDB-native shapes to time-machine version restore.
Drag & Drop 편집Drag & drop authoring
화면 왼쪽 도형 팔레트에서 밸브 · 펌프 · 파이프 · 커넥터를 캔버스로 드래그하면 즉시 배치. 마우스 호버 시 미리보기 이미지 표시.Drag valves, pumps, pipes, and connectors from the left palette onto the canvas. Hover preview shows each shape before you drop.
- 밸브 · 펌프 · 파이프 · 탱크 · 사용자 정의 도형Valves, pumps, pipes, tanks, custom shapes
- 호버 미리보기 · 즉시 배치Hover preview, instant placement
RTDB 전용 도형RTDB-native shapes
RTDB TEXT (태그값 텍스트), RTDB BAR (막대 게이지), RTDB GAUGE (아날로그 게이지), RTDB CHART (인라인 트렌드), RTDB LABEL (다중 상태), RTDB VIRTUAL TAG (이미지 상태).RTDB TEXT (tag values), RTDB BAR (bar gauge), RTDB GAUGE (analog gauge), RTDB CHART (inline trend), RTDB LABEL (multi-state), RTDB VIRTUAL TAG (image state).
- 6종 RTDB 전용 도형 · 더블클릭 속성 설정6 RTDB shape types, double-click to configure
- 스케일 · 임계값 · 색상 자유 설정Scale, threshold, color free control
Revert HistoryRevert history
모든 저장 이력이 자동 백업. 원하는 시점의 공정도로 즉시 복원 가능하며, 되돌리기 전 현재 상태도 자동 보존되어 재복구도 가능합니다.Every save is auto-backed-up. Restore to any point in time instantly. Current state is also auto-preserved so re-recovery is always possible.
- 저장 이력 리스트 · 시점 미리보기History list with per-version preview
- Revert 실행 시 현재 상태 자동 보존Current state auto-saved on revert
Resource ManagerResource Manager
공정도에 삽입할 밸브 · 설비 이미지 리소스를 한 곳에서 등록 · 수정 · 삭제. 등록한 이미지는 캔버스 드래그앤드롭으로 즉시 사용.Register, update, and delete image resources (valves, equipment) in one place. Once registered, drag them onto the canvas instantly.
- 이미지 · 설비 도형 통합 관리Unified image and equipment shape library
- 썸네일 리스트 · 상단 등록 폼Thumbnail list with top registration form
일괄 편집 · 스타일 직접 편집Bulk edit & direct style
같은 타입 도형을 전체 선택하여 속성을 일괄 변경. CSS 스타일 직접 편집으로 세밀한 커스터마이징 가능.Select all shapes of the same type and edit properties at once. Direct CSS style editing for fine-grained customization.
- 타입별 전체 선택 · 일괄 변경Select-all-by-type, bulk update
- CSS 스타일 · 툴팁 · 속성 편집CSS style, tooltip, property editing
레이어 · 그룹 관리Layer & group management
복잡한 공정도를 레이어로 계층화하고, 관련 도형을 그룹으로 묶어 한 번에 이동 · 회전. 고급 그룹 기능으로 대규모 공정도도 관리.Organize complex graphics into layers; group related shapes to move or rotate together. Advanced group features handle even large graphics.
- 레이어 표시/숨김 · 잠금Layer show/hide, lock
- 그룹 · 정렬 · 커넥터 자동 연결Group, align, connector auto-link
HTML5 확장HTML5 extensibility
HTML5 · CSS · JS 로 커스텀 도형 · 애니메이션 · 이벤트를 자유롭게 추가. SVG 애니메이션, CSS3 트랜지션, React 등 확장 라이브러리 사용 가능.Add custom shapes, animations, and events freely with HTML5, CSS, and JS. SVG animation, CSS3 transitions, React and other libraries all supported.
- JS · React 확장 · 사용자 이벤트JS · React extensions · custom events
- SVG · CSS3 애니메이션 · 인터랙션SVG · CSS3 animation · interactions
단축키 · 우클릭 컨텍스트Shortcuts & context menu
모든 편집 명령을 단축키와 우클릭 컨텍스트 메뉴로 즉시 실행. 도형별로 세분화된 컨텍스트 메뉴 제공.Every command reachable by keyboard shortcut or right-click context menu. Context menus vary by shape type.
- 30+ 단축키 · 도형별 컨텍스트 메뉴30+ shortcuts, per-shape menus
- 캔버스 공통 메뉴 · 패널 토글Canvas common menu, panel toggle
저장 즉시 배포.
재배포 없이 확인.
Save and deploy.
No republish needed.
Builder 권한 관리 · 즉시 반영 Builder permissions · instant reflect
완성된 공정도는 서버에 저장되는 즉시 모든 뷰어에 반영. 사용자별 Builder 편집 권한을 세밀하게 제어하여 승인된 관리자만 편집 가능. Saved graphics reflect to every viewer instantly. Fine-grained per-user Builder permissions ensure only approved admins can edit.