Interactive diagram

CAUTION

เนื้อหานี้มีรูปเยอะนะครับ เพราะต้องการให้เข้าใจง่ายๆ ก็เลยทำรูปไวเป็น step เลยครับ

ใครที่ต้อง present diagram บ่อยๆ แล้วบางครั้งคงคิดขึ้นใจในบางละว่า ถ้าเราทำให้ diagram ให้ interactive เช่น show/hide เวลาคลิกบางจุดได้บางก็น่าจะช่วยในการ present ได้บาง

draw.io มันทำได้นะครับ หัวข้อนี้จะเล่าให้ฟังละ

ก่อนอื่นคงต้องเข้าใจ concept มันก่อน

id ของแต่ละ object​

ใน draw.io จะแบ่งแต่ละส่วนเป็น shape นะครับ กล่องๆ ที่เราเอามาใช้ลากเส้นต่อๆ กันนั้นละครับคือ shape

แล้วยังมี object ใหญ่อีกตัวอันนี้หลายๆ คนอาจจะไม่รู้มันคือ layer ครับ layer เปรียบเสมือนผ้าใบที่มองไม่เห็นแต่เราสามารถเอา shape ที่ไม่ใช่ layer ใส่เข้าไปได้ละครับ(จะมองว่าเหมือนตัวจัด group ของ shape ก็ได้เหมือนกัน)

shape แต่ละตัวจะมี id ระบุอยู่นะครับของใครของมันเลยครับ

วิธีดู id ของ shpae ดูได้ด้วยวิธีดังนี้

• shape : คลิกขาวที่ shape ที่เราต้องการ แล้วเลือก menu Edit Data... จากนั้นจะเห็น dialog ตัวอักษรบนสุดของ dialog นั้นละคือ id ของ shape ครับ

draw.io interactive flowchart

draw.io interactive flowchart

• layer : เราต้องเอา Layers windown ออกมาก่อนครับ เหมือนเห็น windown เราจะเห็น layer ที่มีอยู่แล้ว (default เลยคือจะต้องมี layer Background ครับ) คลิกที่ layer ที่เราต้องการ แล้วคลิกที่รูปดินสอครับ จะแสดง dialog ตัวอักษรบนสุดของ dialog นั้นละคือ id ของ layer ครับ

draw.io interactive flowchart

draw.io interactive flowchart

draw.io interactive flowchart

มาถึงตรงนี้เราจะรู้วิธีดู id ของ shape และ layer แล้วนะครับ

จัด shape ให้อยู่ภายใต้ layer​

step ต่อไปคือเราจะเอา shape ให้ไปอยู่ภายใต้ layer ได้ยังไง ในส่วนนี้ทำแรกๆ อาจจะงงๆ กันหน่อยครับ(ส่วนตัวผมก็ งงๆ เหมือนกันรู้สึกว่าเค้าทำ ui ไวเข้าใจยากไปหน่อย)

อย่างที่บอก layer Background มันคือ default นะครับ พอเรา new page ขึ้นมาจะต้องมีเลยเท่ากับว่าทุก shape ที่อยู่ภายใต้ page นั้นจะอยู่ภายใต้ layer Background ไปในทันที

เพื่อไม่ให้งง และให้เห็นภาพเราควร new layer ใหม่ขึ้นมาครับ วิธี new ก็ไปที่ Layers windown แล้วกดที่ icon + ครับ

draw.io interactive flowchart

คลิกแล้วจะเห็นว่าใน Layers windown จะมี layer ใหม่ขึ้นมาให้เลย

เราสามารถตั้งชื่อมันได้นะครับ โดยการ double click ที่ layer นั้น เลยครับ

ทีนี้เราจะเอา shape ใส่เข้าไปที่ layer ตัวใหม่ที่เราทำไว ทำได้โดย

1. คลิกที่ shape ที่เราต้องการครับ

2. คลิก icon hamburger menu ที่ Layers windown

3. เราจะเห็น list layer ทั้งหมดที่เรามี ให้เราเลือก layer ที่เราต้องการให้ shape เราอยู่

draw.io interactive flowchart

1. เมื่อทำเสร็จแล้วเวลาที่เรา คลิกที่ shape มันจะมีสัญลักษณ์ จุดกลมๆ ขึ้นที่ shape ที่มันอยู่ครับ

draw.io interactive flowchart

ทำให้มัน interactive​

step ต่อไปคือสิ่งที่เราต้องการในหัวข้อนี้ละครับ ขอตั้งโจทย์ตัวอย่างที่เราจะทำสักหน่อย สิ่งที่เราจะทำคือเป็น flowchart แสดง grade ที่มี 2 version คือ condition เก่าและ condition ใหม่ที่เปลี่ยนไป

draw.io interactive flowchart

การ present เราไม่ต้องการแสดงเป็น 2 flow เราอยากแสดงแค่ 1 flow และให้เห็นจุดที่แตกต่างโดยการ click ปุ่มแล้วแสดงส่วนที่เปลี่ยนไปได้เลย เท่ากับว่าการแสดงมันมี 2 แบบ เราก็สร้าง layer เตรียมไวเลย 2 layer (copy id ของ layer เตรียมไวด้วยนะครับ)

1. สร้าง layer

• layer : new version id:LRGgn43WQRmEr2ozBxUZ-92

• layer : old version id:LRGgn43WQRmEr2ozBxUZ-2

2. จากนั้นเรา set ให้ shape ทั้งหมดของ flowchart ด้านซ้ายให้อยู่กับ layer old version ทั้งหมด

draw.io interactive flowchart

และเลือก condition ใหม่ 3 shape ให้ไปอยู่ที่ layer new version

draw.io interactive flowchart

3. หลังจาก set layer เรียบร้อยแล้วเราต้องสร้างปุ่มสำหรับ trigger ให้มันแสดงเก่าใหม่ได้เพียงแค่ click ดังนั้นเราสร้างปุ่ม 2 มา ปุ่ม

draw.io interactive flowchart

4. ต้องกำหนดให้ปุ่มทั้ง 2 ปุ่มอยู่ใน layer ด้วย โดยปุ่มจะต้องกำหนดให้อยู่สลับกัน

• ปุ่ม old version ให้อยู่กับ layer new version

• ปุ่ม new version ให้อยู่กับ layer old version หลังจากเสร็จ step นี้แล้วเราจะได้แบบนี้ กรอบสีแดงคืออยู่ใน layer old version กรอบสีฟ้าคืออยู่ใน layer new version

draw.io interactive flowchart

5. กำหนดคำสั่งให้กับปุ่มทั้ง 2 ปุ่มเมื่อ click วิธีกำหนดคำสั่งก็ตามนี้เลย

• คลิกขวาที่ปุ่มแล้วเลือก Edit Link... จากนั้นใส่คำสั่งลงไปแทนคำว่า Drag URLs here

NOTE

อันนี้เป็นรูปแบบที่จะต้องจำนะครับ

data:action/json,{"actions":[{"toggle": {"cells": ["{layer id}"]}}]}

Copy

่ตรง {layer id} ตรงนี้เราต้องแทนที่ด้วย layer id เป็นของเราเองนะคับ

• ปุ่ม old version เมื่อกดแล้วให้ tigger layer old version ให้ hide ไป

data:action/json,{"actions":[{"toggle": {"cells": ["LRGgn43WQRmEr2ozBxUZ-92"]}}]}

Copy

• ปุ่ม new version เมื่อกดแล้วให้ tigger layer old version ให้ show กลับมา

data:action/json,{"actions":[{"toggle": {"cells": ["LRGgn43WQRmEr2ozBxUZ-92"]}}]}

Copy

• จากนั้นลองกด lock layer แล้วลองเอา mouse ไป click ที่ปุ่มดูครับจะเห็นว่ามัน show/hide เมื่อเรา click

  เมื่อลองเสร็จแล้วให้ unlock ด้วยนะครับ ไม่งั้นจะแก้ไขต่อไม่ได้นะครับ

draw.io interactive flowchart

6. ให้เราลากปุ่ม new version และ condision ของ version มาทับที่ old version ให้พอดีกันเปะๆ นะครับ

draw.io interactive flowchart

draw.io interactive flowchart

7. step สุดท้ายก็ให้ lock layer แล้วตามด้วยกำหนดให้เริ่มต้น layer new version เป็น hide ไปซะ

draw.io interactive flowchart

ทาด้า!! เพียงเท่านี้ก็พร้อมที่จะ present แล้วนะคับ

draw.io interactive flowchart

จบแล้วครับ ยาวหน่อย

INFO

ถ้าอยากเห็นตัวอย่างแบบอลังการหน่อยลองดูอันนี้ครับ 👉you can toggle parts of the diagram on and off!

Reference​

• https://drawio-app.com/interactive-diagrams-with-custom-links-and-actions/