วาดแผนภาพ (diagram) ง่าย(ที่ไหน) ด้วย TikZ ตอนที่ 1


ถ้าใครเคยใช้ beamer, TikZ มาบ้าง แล้วเริ่มต้นด้วยการอ่านคู่มือโดยมีเป้าหมายเพื่อที่จำทำงานง่าย ๆ บางอย่างให้เสร็จในเวลาอันรวดเร็ว นั่นหมายความว่าคุณชอบทรมานตัวเอง คู่มือของ beamer และ TikZ นั้นหนา รายละเอียดเยอะ แล้วก็ “ต้องอ่านตั้งแต่ต้น” ใครไม่เคยใช้ beamer และ TikZ และไม่อยากแตะ แต่เคยสัมผัสคู่มือของอุปกรณ์จากเยอรมันเช่น Siemens, dSpace (อาจจะรวม SAP เข้าไปด้วย) ก็น่าจะรู้ดีว่า คู่มือเหล่านี้จะมี Quick Start ที่อ่านจบแล้วไปต่อไปไม่ได้ ตัวอย่างถัดไปไม่สามารถขยายต่อจากตัวอย่างใน Quick Start ได้ บางครั้งทำตามตัวอย่างในบทถัด ๆ ไปทุกอย่าง แต่ได้ error มั่วไปหมด วิธีก็คือตั้งอ่านคู่มือย้อนกลับไปเรื่อย ๆ จนกว่าจะหาสาเหตุเจอ (ซึ่งไม่ง่ายเหมือนคู่มือจากประเทศอื่น)

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

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

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

จะเห็นได้ว่าโหนดแต่ละอันนั้นเป็นรูปสี่เหลี่ยมผืนผ้าขอบโค้ง  ถ้าต้องการวาดแผนภาพแบบนี้ จะต้องมีการเรียกแฟ้มคำสั่ง (library) ก่อน ในกรณีนี้ที่จำเป็นมีสามตัวคือ

\usetikzlibrary{%
  shapes.geometric,%
  positioning, % for of
  calc%
}

คงจะเริ่มเห็นอนาคตลาง ๆ แล้วนะครับ ว่าค่าพวกนี้มาจากไหน รู้ได้อย่าง ซึ่งก็ต้องบอกได้เลยว่าต้องอ่านคู่มือโดยละเอียดอย่างเดียว (ไม่ขำนะครับ เคยมีคนไปถามในเว็บบอร์ด ปรากฏคนที่ตอบ ๆ ว่า ก็ไปอ่านคู่มือเอา หน้าที่ บลา บลา)

จากนั้นก็กำหนด รูปแบบของโหนดที่เราต้องการใช้ซ้ำ ในที่นี้ตั้งชื่อว่า sqbox แล้วกัน ดังนี้ครับ

sqbox/.style={rectangle, rounded corners,
    minimum size=6mm,thick,%
    draw=blue!50!black!50,% 
    top color=white,%
    bottom color=blue!50!black!20}

ก็ตรงไปตรงมา ดังนั้นจะละคำอธิบายละเอียดไป เมื่อนำรหัสต้นไปปะติดปะต่อกันจะได้ดังนี้ครับ

\documentclass{report}
\usepackage{tikz}
\usepackage{pgf}

\usetikzlibrary{
	shapes.geometric,%
	positioning,%
	calc}

\begin{document}
\begin{tikzpicture}
	[auto,
        sqbox/.style={rectangle, rounded corners,% 
                        minimum size=6mm,thick,%
                        draw=blue!50!black!50, 
                        top color=white,%
                        bottom color=blue!50!black!20}]
    \node (LPV) [sqbox]                                      
                                 {LPV Identification};
    \node (IO)  [sqbox, below left=of LPV,yshift=0.5cm]
    \node (SS)  [sqbox, below right=of LPV,yshift=0.5cm]     
                                 {State-Space};

    \draw [->,very thick] ($ (LPV.south) $) -- ++(0,-0.25) 
                                 -| ($ (IO.north) $);
    \draw [->,very thick] ($ (LPV.south) $) -- ++(0,-0.25) 
                                 -| ($ (SS.north) $);

\end{tikzpicture}

\end{document}

คำสั่งที่ต้องการในการวาด sqbox คือคำสั่ง \node และในวงเล็บคือชื่อของโหนด ในที่นี้คือ (LPV), (IO), และ (SS)  ส่วนในวงเล็บก้ามปูคือประเภท และตำแหน่งของโหนด เช่น [sqbox, below left=0f LPV, yshift=0.5cm] ก็คือโหนดแบบ sqbox วางไว้ใต้ (LPV) แล้วเลื่อนขึ้นไปจากค่าปกติ 0.5cm และสำหรับคำในวงเล็บปีกา ก็คือข้อความที่จะบรรจุไว้ในโหนดนั้น ๆ

ในการเชื่อมต่อโนหดเข้าด้วยกันนั้นก็ใช้วิธีเดียวกัน กล่าวคือ ใช้คำสั่ง \draw ในการวาด และในวงเล็กก้ามปูคือ ประเภทและตำแหน่ง ในที่นี้คือ [->, very thick] นั่นหมายถึงเส้นตรงที่มีลูกศรที่ปลายจบ  แบบหน้ามาก ส่วนในวงเล็บนั้นเป็นการบอกจุดตั้งต้นไปจนจุดจบ กรณี ($ (LPV.south) $) — ++(0,-0.25) -| ($ (IO.north) $) คือการลากเส้นจากด้านล่างของโหนด LPV แบบเส้นตรงทึบไปด้านล่าง 0.25 หน่อย แล้วลากไปบรรจบกับโหนด IO ด้านบน  ซึ่งการคำนวนต่าง ๆ จะทำให้แบบกึ่งอัตโนมัติ และผลลัพธ์สุดท้ายก็จะได้ตามรูปที่ได้กำหนดไว้

ก่อนจบ การวาดรูปด้วย TikZ นั้นเป็นแบบ WYSIWYT (what you see is what you think) นั้นมีข้อดีในเรื่อง บรรณาธิกรณ์ ตัวเดียวจบ ทำได้ทุกอย่าง แต่ข้อเสียคือต้องการ ๆ เรียนรู้สูง แต่หลังจากพอเป็นแล้ว การแก้ไขเล็ก ๆ น้อย  ๆ นั้นทำได้ง่าย และสะดวก

ก็ได้แต่หวังว่าบทความวันนี้จะมีประโยชน์บ้างนะครับ

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s