본문으로 건너뛰기

DHTMLX Diagram Editor 개요

DHTMLX Diagram 컴포넌트는 깔끔하고 보기 좋은 다이어그램을 만드는 데 디자이너로서의 역량을 시험하고 적용할 수 있는 Editor를 제공합니다.

기본 모드의 Editor

기본 모드로 초기화된 editor의 인터페이스는 네 가지 기능적 부분으로 구성됩니다.

다이어그램을 만들려면 shapebar에서 필요한 항목을 드래그하거나 도형 toolbar를 통해 항목의 복사본을 만들어야 합니다.

editbar의 사이드바 옵션을 통해 항목의 속성을 조정할 수 있습니다. 스타일링 프로세스를 가속화하려면 Alt (Option) + Ctrl (Cmd) + С 조합을 사용하여 항목의 스타일을 복사하고, Alt (Option) + Ctrl (Cmd) + V를 사용하여 선택한 항목에 이 스타일을 적용하십시오.

관련 샘플: Diagram Editor. 기본 모드. 와이드 순서도

shapebar를 사용자 지정할 수 있으며, 사용자 지정 도형을 추가한 경우 해당 도형의 속성에 맞게 editbar를 구성할 수도 있습니다.

조직도 모드의 Editor

조직도 모드로 초기화된 editor의 인터페이스는 세 가지 기능적 부분으로 구성됩니다.

노트

이 모드의 editor에는 shapebar가 없습니다

editor의 조직도 모드에서 다이어그램을 만들려면 도형을 선택하고 새 자식을 추가해야 합니다. 도형을 한 부모 항목에서 다른 부모 항목으로 드래그할 수 있습니다. 이동한 항목은 모든 자식 항목과 함께 드래그됩니다.

사용 가능한 editbar의 사이드바 옵션을 통해 도형의 속성을 조정할 수 있습니다. 스타일링 프로세스를 가속화하려면 Alt (Option) + Ctrl (Cmd) + С 조합을 사용하여 항목의 스타일을 복사하고, Alt (Option) + Ctrl (Cmd) + V를 사용하여 선택한 항목에 이 스타일을 적용하십시오.

관련 샘플: Diagram Editor. 조직도 모드. 기본 초기화

조직도 모드의 editor에 사용자 지정 도형을 추가한 경우, 도형의 사용자 지정 속성을 편집할 수 있도록 editbar를 구성할 수 있습니다.

모든 레벨의 부모 도형에 assistant 또는 partner 항목을 추가할 수 있습니다. assistant 또는 partner 항목은 부모 항목이 될 수 없습니다.

Org chart editor assistant

부모 도형과 그 partner 간의 연결은 항상 수평입니다. 또한 부모에 partner 항목을 추가하면, 연결이 이전에 수직이었더라도 부모 도형과 모든 자식 도형 간의 연결이 수평이 됩니다.

마인드맵 모드의 Editor

마인드맵 모드로 초기화된 editor의 인터페이스는 세 가지 부분으로 구성됩니다.

노트

이 모드의 editor에는 shapebar가 없습니다

editor의 마인드맵 모드에서 다이어그램을 만들려면 도형을 선택하고 새 자식을 추가해야 합니다. 도형을 한 부모 항목에서 다른 부모 항목으로 드래그할 수 있습니다. 이동한 항목은 모든 자식 항목과 함께 드래그됩니다.

사용 가능한 editbar의 사이드바 옵션을 통해 도형의 속성을 조정할 수 있습니다. 스타일링 프로세스를 가속화하려면 Alt (Option) + Ctrl (Cmd) + С 조합을 사용하여 항목의 스타일을 복사하고, Alt (Option) + Ctrl (Cmd) + V를 사용하여 선택한 항목에 이 스타일을 적용하십시오.

관련 샘플: Diagram Editor. 마인드맵 모드. 감정 마인드맵

마인드맵 모드의 editor에 사용자 지정 도형을 추가한 경우, 도형의 사용자 지정 속성을 편집할 수 있도록 editbar를 구성할 수 있습니다.

다음 단계

여기까지입니다. 이제 다이어그램 작업을 시작하거나 가이드에서 JavaScript Diagram과 Diagram Editor의 내부 세계를 계속 탐구할 수 있습니다.