Excalidraw คืออะไร? ใช้ยังไง?

Visual thinking, Diagramming, Charting, visual examples

Update on 16 April, 2024

Introduction

Excalidraw เป็นโปรแกรมกระดานดำ/ขาวที่ช่วยให้เราสื่อสารกันได้ง่ายยิ่งขึ้นด้วยการวาดภาพซึ่งเป็นโปรแกรมฟรีที่สามารถใช้ได้หลากหลายที่ไม่ว่าจะเป็นบนเว็บไซต์ตามลิงก์ด้านล่าง ใน notetaking app ที่ชื่อว่า obsidian หรือแม้แต่ใน vscode สำหรับคนที่เขียนโปรแกรม

white mode

dark mode: ลิงก์เดียวกันตั้งค่าด้านบนซ้าย

เผื่อมีใครที่เคยใช้ program อื่นที่ใกล้เคียงกันผมแนบลิงก์เพิ่มเติมไว้ด้านล่างด้วย miro เนี่ยเป็นเครื่องมือที่ดีมากตัวนึงเนื่องจากมันมี template ต่างๆ ให้เยอะมากแล้วก็เหมาะกับการทำงานร่วมกันแบบออนไลน์ จุดอ่อนอย่างนึงของ miro freeplan คือคุณสามารถใช้ active board ได้แค่ 3 อันเท่านั้นเอง แล้วก็การ export ภาพออกจากมาจาก board ใน miro ได้แค่ขนาดเล็กเท่านั้น(2449x1632 px) สามารถลองไปเล่นฟรีก่อนได้ครับ ด้วยเหตุผลพวกนี้ผมก็เลยตัดสินใจมาใช้ excalidraw เพราะมันฟรีแล้วก็ดูสะดวกดี

หมายเหตุไว้ว่า excalidraw เป็นเครื่องมือที่ยังอยู่ระหว่างการพัฒนาไปด้วยเพราะฉะนั้นจะไม่ได้มี feature เจ๋งๆ ทุกอย่างที่เครื่องมืออื่นๆ เขามีกันครับ แต่ก็เพียงพอสำหรับการใช้พื้นฐาน

Excalidraw - Collaborative whiteboarding made easy

Sign up | Miro | Online Whiteboard for Visual Collaboration

Digital Online Whiteboard App - Microsoft Whiteboard

Usability/Simple guideline

โดยพื้นฐาน excalidraw จะมีรูปทรงต่างๆ ตาที่เห็นเลยครับ ทีนี้หลายคนอาจจะสงสัยว่าถ้าอยากได้รูปทรงอื่นๆ ทำยังไงได้บ้าง ทางง่ายที่สุดก็คือวาดขึ้นมาเองตามภาพด้านล่างเลยครับ

simple object

ในกรณีที่เราไม่อยากจะวาดทุกอย่างขึ้นมาจากความว่างเปล่าหรือว่าต้องการรูปทรงที่มีคนสร้างเอาไว้ก่อนแล้วเราสามารถที่จะเข้าไปใช้ excalidraw libraries ด้านล่างได้ซึ่งจะมี package หรือ collection ให้เราสามารถติดตั้งไว้ในเครื่องของเราแล้วเปิดมาใช้ได้เลยเช่น รูปทรงสามเหลี่ยม ห้าเหลี่ยม หกเหลี่ยม หรือแม้แต่ chart ที่มีคนทำเอาไว้

excalidraw library: click ขวาบนแล้วโหลดมาใช้ได้เลย!!!

Excalidraw Libraries

เครื่องมือตัวนี้ให้รายละเอียดเกี่ยวกับ background แล้วก็เส้นขอบไว้หลายอย่างอย่างที่ผมได้แสดงตัวอย่างไว้ด้านล่าง เราสามารถกำหนดความละเอียดแบบต่างๆ ที่เราชอบเองได้

object background and border

ตัวอย่างด้านล่างเป็นการสร้างตารางขนาด 2x2 ซึ่งเป็นตารางที่ consult มักชอบใช้ในการแบ่งข้อมูลจากสองตัวแปรเป็นอย่างละ 2 กลุ่มเราสามารถทำได้เหมือนภาพด้านล่างแล้วใส่สี หรือคำอธิบายไว้ในแต่ละส่วนได้

two-by-two matrix

ฟีเจอร์ใหม่ของ Excalidraw ที่เพิ่มเติมจากปี 2023 รวมทั้ง Frame tool, Web Embed, Laser Pointer, Text to diagram, Mermaid to Excalidraw และ Wireframe to code ผมขอข้ามไปอธิบาย Laser Pointer ก่อน ถ้าใครเคยใช้ใน google slide ตอนนำเสนอมันก็จะเป็นลักษณะเดียวกันเลยก็คือเหมือนเลเซอร์ที่เอาไว้ใช้ยิงบนภาพแล้วก็จะหายไปในเวลาไม่นาน สำหรับฟีเจอร์นี้ผมไม่เคยใช้ร่วมกับคนอื่นไม่แน่ใจว่าถ้าเราคุยกันหลายคนจะสามารถใช้ laser เขียนไปพร้อมกันได้มั้ย

New features in 2024

ส่วนตัวแล้วผมชอบใช้ Frame tool ใน Obsidian มากกว่าเพราะมันมาคู่กับการที่เราสามารถทำ present บน Obsidian ได้เลยเหมือนกับวตัวอย่างด้านล่าง ซึ่งเมื่อเราใช้ Frame แล้วนอกเหนือไปจากการจัดงานรวมไว้ในกรอบเดียวกันแล้วตั้งชื่อ เรายังสามารถใช้ presentation ใน obsidian เพื่อการนำเสนองานได้ด้วย

Text to Diagram กับ Wireframe to code เป็นสองส่วนที่ผมยังไม่เคยใช้ ซึ่งถ้าใครจะใช้ก็จะต้องเอา OpenAI API key ของตัวเองมาใส่ใน setting เพื่อให้สามารถใช้ได้ อันสุดท้ายคือ Mermaid to Excalidraw ซึ่ง Mermaid เป็น Digramming tool & Charting tool อีกตัวหนึ่งที่สามารถร่างภาพขึ้นมาจาก markdown ที่เราเขียนได้เลย ซึ่ง Mermaid ปัจจุบันสามารถใช้ใน Github, Gitlab markdown ได้เลย chart ที่สามารสร้างได้ในปัจจุบันได้แก่ Flowchart, Sequence Diagram, Gantt chart, Mindmap, Timeline, User Journey, Git Graph, State Diagram, Class Diagram เป็นต้น ซึ่งหลากหลายรูปแบบตรงนี้ผมเองก็ยังใช้ไม่ครบ เราลองมาดูตัวอย่างจาก document ของ mermaid กัน

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Flow chart

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

gantt

    gitGraph
       commit
       commit
       branch develop
       commit
       commit
       commit
       checkout main
       commit
       commit

git graph

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

User journey diagram

ใครที่สนใจจะใช้ Mermaid เพิ่มเติมก็ลองไปใช้ดูได้ใน Github, Gitlab, VS Code(Markdown Preview Mermaid Support), Obsidian, บนเว็บของ Mermaid เอง แต่ตอนนี้ยังไม่รองรับที่จะใช้บน Medium

Mermaid

Visual thinking

การคิดด้วยภาพเป็นอีกส่วนหนึ่งที่ผมรู้สึกว่าเครื่องมือตัวนี้สนับสนุนได้ดี อาจเป็นเพราะว่าผมไม่เคยใช้แอพวาดภาพอย่างจริงจังมาก่อนก็มีความเป็นไปได้

แล้วเครื่องมือวาดภาพตัวนี้ต่างจากตัวก่อนๆ อย่างไร?

ส่วนตัวผมมองว่ามันไม่ใช่เครื่องมือวาดภาพ โดยความตั้งใจของคนที่สร้างขึ้นมาน่าจะเป็นฝั่ง developer ที่เอามาใช้ในงาน diagram หรือ flowchart เพื่อวาดรูปแบบระบบต่างๆ มันจึงมีรูปทรงอยู่หลายอย่างให้เราได้เลือก

ผมมีโอกาสได้ใช้เครื่องมือตัวนี้ในการคิดและวาดเพื่อแสดงความหมายออกมาก็พบว่ามันใช้การได้ดีพอสมควรตัวอย่างเช่นภาพด้านล่างซึ่งอาจจะยังไม่สมบูรณ์เท่าไหร่นัก

ผมขอเริ่มต้นแบบนี้ครับ ผมคิดว่า visual thinking ช่วยให้เราได้คิด ทดลอง และร่างรูปแบบที่ไม่ชัดเจนในสมองของเราออกมาเป็นภาพ แล้วเราค่อยมาตัดสินอีกทีว่ามันเวิร์คหรือไม่เวิร์ค ในกระบวนการสร้างภาพด้านล่างเนี่ย ผมไม่ได้เริ่มต้นจากโครงสร้างที่สมบูรณ์แบบที่ทุกคนเห็นอยู่ด้านล่างเลยครับ ผมเริ่มต้นจากไอเดียที่ว่าอยากแสดงให้เห็นว่าสายงานใช้เวลาแตกต่างกันอย่างไรก็เลยลองทำมาเป็น bar ที่แบ่งแยกระหว่างเนื้องาน 2 ประเภท จากนั้นผมก็ลากไปลากมาดูว่าสายงานนี้เป็นประมาณนี้รึเปล่า* วาดไปวาดมาก็ได้ออกมาประมาณนี้ครับ

*หมายเหตุ: กระบวนการสร้างภาพด้านล่างขึ้นมาอาจจะไม่ได้มีข้อมูลที่แท้จริงรองรับ ข้อมูลด้านล่างสามารถใช้ดูสนุกๆ ได้แต่ถ้าจะเอาไปประกอบการตัดสินใจอื่นๆ อย่าลืมหาข้อมูลอื่นประกอบด้วย

data family

เมื่อผมวาดภาพด้านบนออกมาเสร็จเนี่ยก็รู้สึกว่ามันชัดเจนกว่าการที่ผมเก็บข้อมูลต่างๆ ในหัวผมไว้ในรูปแบบของประสบการณ์หรือคำอธิบาย(เป็นอักษร) ผมก็เอาภาพนี้ไปใช้สื่อสารกับรุ่นน้องที่กำลังพยายามเปรียบเทียบว่าสายงานพวกนี้มันต่างกันประมาณไหน(โดยคร่าว)

รายละเอียดเพิ่มเติมคือผมไม่ได้เรียนในสายงานที่ต้องวาดรูปนะครับ แล้วทักษะการวาดรูปในเชิงศิลปะของผมก็ค่อนข้างแย่ในทุกรูปแบบ สีน้ำ sketch สีไม้(แม้แต่ตอนอนุบาล) หรือแม้แต่วาดแบบต่างๆ ดังนั้นผมเชื่อว่าจุดสำคัญไม่ได้อยู่ที่ว่าคนใช้จะต้องวาดรูปได้เก่งตั้งแต่แรก แต่เราใช้เครื่องมือตัวนี้เป็นเหมือนส่วนขยายของสมองของเรา(extended brain) เพื่อให้กระบวนการเรียนรู้หรือกระบวนการคิดในหัวของเราเห็นผลที่ชัดเจน(explicit) มากกว่าแค่คิดแบบวนไปมาในหัวนั่นเอง

Where to learn more?

ใครที่สนใจศึกษาเพิ่มเติมสามารถดูตัวอย่างภาพวาดได้จากบทความของอ.ธงชัย ครับ เป็นการประยุกต์การใช้งานภาพวาดที่ทำให้การสื่อสารเป็นเรื่องง่ายมากยิ่งขึ้น ซึ่งใช้การสื่อสารเพื่ออธิบายความแตกต่างในเชิงนามธรรมนิดหน่อย เช่น ความรู้สึกเวลาเรียนและเวลาทำงาน, say NO say YES, การเตรียมสอนของอาจารย์, ข้ามบึง อย่าสู้จระเข้ เป็นต้น

ภาพวาดไอเดีย 19 รูปของผมระหว่างเดือนมกราคม — กุมภาพันธ์ 2023

(Medium membership article)ด้านล่างเป็นการใช้งานภาพวาดในสายของ data science ซึ่งก็อาจจะใช้เพื่อการสื่อสาร อันนี้เอาไว้ดูเป็นไอเดียเพื่อความสนุก

Excalidraw: How to Bring Complex Data Science Ideas to Life in Sketches

(google slide)คำอธิบายเกี่ยวกับ project นึงซึ่งใช้ภาพวาดจาก excalidraw มาประกอบ

A brief illustrated history of Prometheus

ช่อง youtube channel ด้านล่างสอนการใช้งาน excalidraw บน obsidian ซึ่งจะมี feature อื่นๆ อีกหลายอย่างเช่น การนำภาพวาดประกอบใส่เข้าไปใน note การใช้ script engine ช่วยในการสร้างรูปแบบที่เราต้องการที่ต้องทำด้วยมือแล้วใช้เวลานาน

Zsolt's Visual Personal Knowledge Management

Reference

1. Excalidraw Repository in Github
2. Obsidian Excalidraw plugin repository in Github