draw.io로 타이밍 차트 만들기 — 점과 선으로 그리는 절차와, Step을 더하면 무너지는 곳

마지막 수정: 2026-09-24 ／ 분류: 타이밍 차트, 방법 비교

draw.io의 타이밍 차트는 점과 선으로 그리는 것보다 에디터로 그려서 붙이는 쪽이 Step을 더해도 무너지지 않습니다. 시스템 구성도를 draw.io로 그리고 있어 차트도 같은 파일에 두고 싶은 분을 위해 썼습니다.

1. 점과 선으로 그린다면 모눈을 Step 폭으로 정한 뒤 점을 놓는다

draw.io로 타이밍 차트를 그린다면 점과 선과 사각형의 조합이 됩니다. draw.io (diagrams.net)에는 템플릿도, 신호를 나열해 그리기 위한 부품도 없기 때문입니다. 공식 UML 타이밍 다이어그램 절차도 작은 점과 선과 사각형을 조합해 그리는 방식입니다.

1. 모눈을 Step 폭으로 정한다 모눈은 기본값이 10이므로 1 Step을 모눈 4칸 (40)으로 정합니다. 도형도 선의 꺾임점도 모눈에 달라붙으므로 위아래 신호의 변화 지점이 맞춰집니다. 변화 지점을 옮길 때는 모눈에서 벗어나므로 Alt를 누르지 않습니다.
2. BOOL 신호는 점을 놓고 선으로 잇는다 변화 지점마다 작은 점 (웨이포인트)을 놓고 화살촉 없는 직선으로 잇습니다. 선 하나에 꺾임점을 더해 그려도 겉보기는 같습니다. 다만 Step을 더했을 때 오른쪽 꺾임점이 따라오지 않으므로 (2장), 점을 일일이 놓습니다.
3. 수치나 상태는 육각형을 맞댄다 워크 번호 같은 수치는 "12"라고 쓴 육각형입니다. 값이 바뀌는 곳에서 옆 육각형과 끝을 맞댑니다. 뾰족한 끝끼리 맞닿아 변화 지점이 교차 (><)로 보입니다.
4. 인과 관계는 점에서 점으로 화살표로 잇는다 취출 요구가 ON 되는 점에서 로봇 동작 중이 ON 되는 점으로. 점 위에 나오는 파란 화살표에서 드래그해 다음 점에서 놓으면 선이 점에 연결됩니다. 점에 연결한 화살표는 점을 옮기면 따라옵니다.

2. 수정과 내보내기에서 곤란하다. 더한 Step에 꺾임점은 따라오지 않는다

draw.io의 그림은 점의 위치만 가지고 있고, Step이나 신호의 관계를 모릅니다. "취출 완료를 1 Step 늦춰 줘"라는 말을 들을 때마다 점이나 꺾임점을 하나씩 다시 옮기게 됩니다.

• 더한 Step에 선 하나의 꺾임점은 따라오지 않는다 — Step을 더하는 조작은 빈 공간을 여는 드래그입니다. Alt와 Ctrl과 Shift를 누른 채 오른쪽으로 드래그하면 누른 곳보다 오른쪽 아래에 있는 도형만 움직입니다. 점으로 그린 파형은 오른쪽 점이 움직이지만, 선 하나로 그린 파형은 시작점이 왼쪽에 있으므로 움직이지 않습니다.
• 같은 Step에서 바뀌는 신호는 하나씩 옮긴다 — 그림은 "같은 Step에서 바뀐다"는 관계를 갖고 있지 않습니다. 취출 완료의 ON을 1 Step 늦추면 같은 Step에서 OFF 되는 로봇 동작 중의 점도 옮깁니다. 그 뒤의 취출 요구 OFF와 취출 완료 OFF의 점도 직접 옮깁니다. 점에 연결한 화살표는 따라 움직이지만, 옮기는 것을 잊은 점이 있어도 그림은 아무 말도 하지 않습니다.
• 그림에서 값을 다시 읽을 수 없다 — 점을 선택해 [배치] 탭을 봐도 나오는 것은 위치 좌표뿐입니다. 취출 완료의 ON이 Step 6인지 7인지는 그 수에서 역산하거나 모눈을 세어 확인합니다. CSV에서 도형과 선을 만드는 기능은 있지만, 선의 꺾임점은 쓸 수 없고 그림에서 고친 것도 CSV로 돌아가지 않습니다.
• SVG의 글자가 다른 앱에서 깨진다 — draw.io의 SVG는 글자를 HTML로 쓰는 것이 기본값입니다. 표시할 수 없는 앱에서는 그 글자가 단순한 형태로 바뀌기 때문입니다. 사양서에 붙인다면 [텍스트] 탭의 [레이블을 SVG로 변환]에 체크하고, 없는 draw.io라면 PNG로 합니다.

3. 수정이 많은 차트는 에디터로 그려서 draw.io에 붙인다

그런 차트는 Timing Chart Editor로 그려서 draw.io에 붙입니다. 내보내기는 일방통행이며, draw.io에서 고친 그림은 에디터로 읽어 들일 수 없습니다. draw.io 쪽에서 하는 것은 주석이나 테두리를 덧붙이는 것뿐입니다. 위 그림과 같은 차트를 연 에디터 (새 탭에서 열립니다)에서 아래 절차 2~4를 그대로 시험해 볼 수 있습니다.

1. 신호를 나열한다 할당이 끝났다면 nWorkNo나 bPickReq는 Address Map Editor에서 보냅니다. 쓰는 것은 그쪽의 "타이밍 차트로 →". 할당이 아직이라면 왼쪽 변수 리스트의 "가져오기…"에 신호 목록을 붙여 넣습니다.
2. 파형을 칠하고 화살표를 긋는다 BOOL 행은 가로 드래그로 ON을 칠하고, 수치 행은 더블클릭으로 값을 쓰기만 하면 됩니다. 화살표는 툴바의 "화살표"를 누르고, 워크 번호가 나온 변화 지점에서 취출 요구가 ON 되는 변화 지점으로 드래그합니다. 화살표는 Step 번호로 기억하므로, Step을 삽입하면 뒤의 파형과 화살표가 함께 밀리는 구조입니다.
3. draw.io에 붙인다 내보내기에서 Draw.io를 선택해 복사하고, 새 페이지에 Ctrl+V로 붙이기만 하면 됩니다. XML 문자가 그대로 붙여졌을 때는 그것을 지우고 [기타] → [다이어그램 편집…]을 엽니다. 칸의 내용을 Ctrl+A로 선택한 뒤 붙여 넣고 [적용]을 누릅니다.
4. 붙인 그림을 그룹으로 만들고 주석을 더한다 붙인 직후 Ctrl+G로 그룹으로 만들어 두면 교체는 지우기만 하면 됩니다. 붙여지는 도형은 모눈 (10)에 올라가 있으므로, 주석 글자나 테두리는 모눈에 달라붙게 놓으면 변화 지점과 맞춰집니다. 파형과 화살표는 연결되어 있지 않으므로, draw.io 안에서 변화 지점을 옮기면 화살표는 그 자리에 남은 채입니다.

4. draw.io 위에서 고쳐진 그림은 JSON에 같은 수정을 넣고 다시 내보낸다

draw.io 위에서 고쳐진 파형은 에디터의 JSON에 같은 수정을 넣은 뒤 교체합니다. 로봇 측 담당자에게 .drawio를 넘기면 파형을 draw.io 위에서 고쳐 돌려주는 일이 있습니다. 그 수정은 JSON에 없으므로 다음에 내보낸 그림으로 교체하면 사라지기 때문입니다. JSON은 Ctrl+S로 저장하고, .drawio와 같은 이름으로 나란히 둡니다 (JSON 데이터 구조 사양).

관련 글

• 타이밍 차트 작성법
• Excel로 타이밍 차트 만들기

yk.builds