การเขียนผังงาน (Flowchart) ด้วย Microsoft Visio
- +



ของในห้องแจกของแจกฟรีทุกชิ้น

^ประกาศ pordoo.com คือเว็บสำหรับแจกสิ่งของ สมาชิกสะสมพอยท์ภายในเว็บเพื่อนำไปแลกของรางวัลที่ต้องการ
พอยท์ได้มาจากไหนบ้าง?
1.สมัครสมาชิกรับ 100 พอยท์
2.กดรับจากAdmin สัปดาห์ละ 100 พอยท์
3.สมาชิกคนอื่นกดให้พอยท์ (กดที่กล่องของขวัญ)
แจก 2,000 พอยท์ทุกสัปดาห์ รอบ15 คลิ้กเลย

ผู้เขียน หัวข้อ: การเขียนผังงาน (Flowchart) ด้วย Microsoft Visio  (อ่าน 4025 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smfTopic starter

  • "ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,353
  • พอยท์: 4
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
  • คอมเมนต์สินค้า: (1)
การเขียนผังงาน (Flowchart) ด้วย Microsoft Visio
« เมื่อ: 24 กันยายน 2016, 14:56:13 »
จากบทความที่แล้วเรื่อง การเขียนผังงาน (Flowchart) เบื้องต้น ตอนที่ 1 เราได้รู้จักกับผังงานไปแล้ว ในบทความนี้เราจะมาแนะนำเครื่องมือในการวาดผังงานที่เป็นที่นิยมใช้กันนั่นคือ Microsoft Visio

Microsoft Visio ถูกสร้างขึ้นมาเพื่อเป็นเครื่องมือเพื่อช่วยในสร้างโฟลชาร์ต หรือไดอะแกรมของงานในสาขาต่างๆ ให้ทําได้ง่าย และสามารถทํางานร่วมกับ Microsoft Office ของไมโครซอฟท์ได้เป็นอย่างดี โดยลักษณะของโปรแกรมจะมีรูปภาพต่างๆ ที่สื่อความหมายถึงของการนําเอาไปใช้ เพียงลากไปวางบน Drawing Area และปรับค่าต่างๆ ให้ตรงตามความต้องการเท่านั้น
การเรียกใช้งาน
visio001 height=714
เนื่องจากโปรแกรม Microsoft Visio เตรียมแม่แบบต่างๆ ไว้รองรับรูปแบบการสร้างโฟลชาร์ต หรือ ไดอะแกรมไว้ให้แล้วจึงสามารถเลือกแม้แบบตั้งแต่ตอนเปิดโปรแกรมครั้งแรกให้ ตรง กับความต้องการการใช้งานสำหรับการเขียนผังงานดับเบิลคลิกที่ Basic Flowchart (Matric) เลย

visio002 height=419
 
ส่วนประกอบต่างๆของ Visiovisio003 height=435
 
  • Toolbar คือที่สำหรับรวบรวมเครื่องมือต่างๆ ของ Visio มีลักษณะเป็นแบบ Ribbon
visio004 height=95
 
 
  • Shape panel คือบริเวณที่จะเก็บรูปทรง (Shape) ต่างๆ เอาไว้สำหรับ ลากและนำไปวางใน Drawing Area โดย Shape จะถูกเก็บไว้เป็นกลุ่มๆเรียกว่า Stencil หากต้องการเพิ่ม shape เข้ามาให้กดที่ More Shapes
visio005 height=300
 
 
  • Drawing Area คือพื้นที่ที่จะใช้ในการวาดผังงานหรือ Diagram ต่างๆ
visio006 height=215
 
เริ่มวาดผังงาน
 ตอนที่เราเปิด Visio ครั้งแรก Visio จะให้เลือก Template เพื่อเริ่มวาดทันที ให้เลือก Basic Flowchart(Matric) โดยการกดดับเบิลคลิก หรือ กด Create ได้เลย หรือหากต้องการวาดไดอะแกรมชนิดอื่นๆ ก็เลือกเทมเพลตให้เหมาะสมกับไดอะแกรมที่ต้องการวาด
visio007 height=325
 
หลังจากนั้นให้คลิกเลือก Shape เมนูด้านซ้าย แล้วลากมาวางที่ Drawing Area
visio008 height=488
 
สำหรับ Visio 2010 นั้นออกแบบมาให้ใช้งานได้อย่างง่าย โดยเมื่อว่า shape ใดลงไปใน Drawing Area แล้วจะพบว่า shape นั้นๆจะมีลูกศรสีฟ้าปรากฏขึ้น เมื่อเรานำเมาส์ไปชี้ที่ลูกศร Visio ก็จะมี Shape พื้นฐานมาให้เราเลือกทันทีโดยไม่ต้องกลับไปลาก shape เหล่านั้นมาจาก panel อีกทั้งยังทำการลากเส้นเชื่อมแบบลูกศรให้อัตโนมัติอีกด้วย แต่ถ้าหากไม่มีในตัวเลือกก็ต้องกลับไปลาก shape ที่ต้องการมาจาก panelvisio009 height=223
 
 
  • การลบ shape สามารถทำได้ง่ายๆโดย เลือก shape ที่ต้องการลบโดยการคลิกเลือก หลังจากนั้น shape จะมีเส้นขอบสีฟ้าปรากฏ กด Del ที่ Keyboard เพื่อทำการลบ
visio010 height=263
 
 
  • การเลื่อน shape ทำได้เช่นเดียวกับการลบ โดยการคลิกเลือก หลังจากนั้น shape จะมีเส้นขอบสีฟ้าปรากฏและ cursor ของเมาส์จะเปลี่ยนเป็นรูปลูกศร 4 ทิศ ให้เราคลิกข้างไว้แล้วลาก shape ไปในตำแหน่งที่ต้องการ พร้อมกันนั้น Visio ก็จะเปลี่ยนทิศทางของลุกศรตาม
visio011 height=238
 
 
  • การหมุน shape สามารถทำได้โดยการคลิกเลือก หลังจากนั้น shape จะมีเส้นขอบสีฟ้าปรากฏ และเมื่อเลื่อน cursor เมาส์ไปด้านบน ก็จะพบกับ จุดหมุน cursor จะเปลี่ยนเป็นรูปลูกศร วงเวียนให้เราคลิกแล้วทำการหมุน shape ไปในทิศทางที่ต้องการ
visio012 height=248
 
การย่อ – ขยาย shape สามารถทำได้โดยการคลิกเลือก หลังจากนั้น shape จะมีเส้นขอบสีฟ้าปรากฏ และเมื่อเลื่อน cursor เมาส์ไปที่สีเหลี่ยมสีฟ้า ก็จะพบกับ จุดเปลี่ยนขนาด cursor จะเปลี่ยนเป็นรูปลูกศร สองทิศทางนั่นหมายความว่าเราสามารถ ย่อ – ขยาย ขนาด shape ได้ตามต้องการ ให้เราคลิกแล้วทำการเลื่อน cursor เข้าออกเพื่อปรับขาด shape ตามที่ต้องการ
 เคล็ดลับ การย่อ – ขยาย shape ที่ดีควรทำที่มุมของ shape เพื่อไม่ให้ shape บาง shape เสียสมมาตรไปซึ่งจะไม่ได้ตามมาตรฐานของ Flowchart
visio013 height=279
 
 
  • การพิมพ์ข้อความลงใน shape เพื่อเป็นการอธิบายความหมายหรือระบุหน้าที่ของ shape สามารถทำได้โดยการดับเบิลคลิก shape ที่ต้องการพิมพ์ข้อความ หลังจากนั้นจะปรากฏ cursor กระพริบพร้อมรับข้อความที่ต้องการพิมพ์ ให้ทำการพิมพ์ข้อความที่ต้องการลงไปvisio014 height=247
 
 
  • การปรับแต่ง ฟอนต์ ทำได้เช่นเดียวกับ Microsoft office โดย Drag เลือกข้อความที่ต้องการปรับแต่งก่อน หลังจากนั้นไปที่ Toolbar แถบเครื่องมือ Home เลือกฟอนต์ ขนาดรูปแบบตามต้องการ
visio015 height=197
 
 
  • การปรับแต่ง shape ครั้งละมากๆ การปรับแต่ง shape ครั้งละมากๆ เพื่อเป็นการประหยัดเวลา โดยสามารถทำได้ทั้ง การย่อขาย การเคลื่อนย้าย การหมุน การปรับแต่งฟอนต์สามารถทำได้โดยการเลือกทั้งหมด โดยการลากเมาส์ครอบคลุมทุก shape หรือกด Ctrl+A หลังจากนั้นทำการการย่อขาย การเคลื่อนย้าย การหมุน การปรับแต่งฟอนต์ ตามวิธีการด้านบน ข้อควรระวัง ทุก shape ที่ถูกเลือกจะมีการปรับแต่งในลักษณะเดียวกันทั้งหมด
  • การเพิ่มกล่องข้อความ การเพิ่มกล่องข้อความนั้นมีข้อดีก็เพื่อใช้ในการเขียนคำบรรยายต่างๆ นอกเหนือจากที่มีใน shape สามารถทำได้โดย ปกติ cursor ที่เราใช้จะเป็น Pointer tool ให้เลือกเครื่องมือ Text ที่ Toolbar หลังจากนั้น ลากกล่องข้อความใน Drawing Area แล้วพิมพ์ข้อความตามที่ต้องการ และปรับแต่งตามต้องการvisio016 height=453
หลังจากที่เราพิมพ์ข้อความเสร็จแล้ว โดยปกติข้อความจะไม่ปรากฏกล่อง เราสามารถกหนดให้มีกล่องข้อความได้โดยการกำหนดคุณลักษณะของกล่องข้อความจาก Toolbar ในส่วนของ Shape
visio017 height=303
 
การใช้งาน Connector ในกรณีที่เราไม่ได้ให้ Visio สร้าง shape ให้เราโดยอัตโนมัติ แต่ใช้วิธีการลาก shape ใหม่เข้ามาวางใน Drawing Area ผลก็คือ Visio ก็จะไม่ได้สร้าง เส้นให้เราอัตโนมัติเช่นกัน ให้สังเกตขณะที่เราลาก shape มาวาง Visio จะสร้างเส้นเทียบ (สีส้ม) ให้เราทราบถึงระยะห่างและแนวในการวางว่าตรงกับ shape อื่นๆ หรือไม่ ซึ่งเพิ่มความสะดวกให้กับเรามากขึ้น
visio018 height=467
เมื่อวาง shape เสร็จแล้ว จำเป็นที่จะต้องลากเล้นเอง โดยให้เราใช้เครื่องมือ Connector ที่อยู่ใน Toolbar แถบ Home เลือกเครื่องมือ Connector เมื่อเลือกเครื่องมือแล้ว cursor จะลี่ยนเป็นลูกศรพร้อมมีสัญลักษณ์ connector แสดงเพื่อให้เราทราบว่า ตอนนี้เราใช้เครื่องมือ connector อยู่ หลังจากนั้นคลิกไปที่ connection point (จุด x สีฟ้ารอบๆ shape) ต้นทางแล้วลากไปยัง connection point ปลายทาง เส้นพร้อมปลายลูกศรจะถูกสร้างขึ้นอัตโนมัติ
visio019 height=424
ผลผลที่ได้จากการลากเส้น
visio020 height=400
 
การปรับแต่งเส้น เพื่อให้เส้นที่เชื่อมโยงมีลักษณะอื่นๆ สามารถปรับแต่งเส้นได้ด้วยการ คลิกขวา ที่เส้นที่ต้องการปรับแต่ง หลังจากนั้นเลือก Format เลือก Line ดังภาพ เมื่อเลือกแล้วก็จะปรากฏหน้าต่างในการปรับแต่งเส้นให้เราสามารถปรับแต่ได้ ตามต้องการ
visio021 height=690
และการปรับแต่ง ยังสามารถทำได้ทั้ง ตัวอักษรและสีจากเมนูเดียวกันนี้ด้วย
visio022 height=351
 
การรวม – แยกกลุ่ม shape ข้อดีของการรวมกลุ่ม shape คือ Visio จะมองว่า shape ที่รวมกลุ่มกันนั้นเป็น shape เพียง 1 ชิ้นทำให้สามารถจัดการปรับแต่งได้ง่ายขึ้น วิธีการรวมกลุ่ม shape ทำได้โดยเลือก shape อย่างน้อย 2 shape แล้ว คลิกขวา เลือก Group –> Group
visio023 height=698
ส่วนการแยกกลุ่มก็ทำย้อนกลับโดยเลือก shape ที่ทำกลุ่มไว้แล้ว คลิกขาว เลือก Group –> Ungroup โดย Shape ที่ถูก Group แล้วจะเป็น shape เดียวกัน
visio024 height=648
 
การเปลี่ยน Design ของ Chart เพื่อให้ Flowchart ที่เราสร้างูสวยงามมากขึ้นเราสามารถเปลี่ยนรูปแบบตามที่มีให้โดยไปที่ Toolbar เลือกแถบ Design หลังจากนั้นเลือกแบบที่ต้องการ
visio025 height=75
ข้อสังเกต เมื่อเราเปลี่ยน Design ที่ shape panel สีก็จะเปลี่ยนตาม design ด้วย
visio026 height=365
การนำไปใช้ใน Microsoft office สามารถทำได้ง่ายๆโดยการ เลือก Shape ใน drawing Area ที่ต้องการ หลังจากนั้น คัดลอก โดยกด Ctrl+C หรือ คลิกขวา เลือก copy แล้วนำไปวางใน Microsoft Office เช่น Word PowerPoint ได้ทันที หากเครื่องนั้นๆติดตั้ง Visio ก็จะสามารถดับเบิลคลิกเพื่อแก้ไขได้เช่นกัน
การ Save เป็นไฟล์รูปภาพ เพื่อให้ Chart จาก Visio สามารถนำไปใช้กับโปรแกรมอื่นๆได้ เราสาเราสามารถบันทึกไฟล์ Visio ให้อยู่ในฟอร์แมตอื่นๆได้ โดยการไปที่เมนู File –> Save As หลังจากนั้นเลือก Save as type เป็นฟอร์แมตที่ต้องการเช่น jpg png เป็นต้น
visio027 height=498
เพิ่มเติม
การวาด Activity Diagram หรือ Swim Lane Diagram
     จาก ข้อจำกัดของการเขียนผังงาน ข้อ 3 ที่ว่า
3.ผังงานระบุผู้เกี่ยวข้องกับงานหรือขั้นตอนนั้นๆได้ยาก จึงแก้ปัญหาโดย ใการใช้ Swim Lane Diagram ซึ่งก็คือ Flowchart ที่แยกบุคคลที่ทำงานและ ขั้นตอนที่บุคคลดังกล่าวรับผิดชอบหรือเกี่ยวข้องระบุผู้เกี่ยวข้อง
ดังนั้น Swim Lane Diagram = Flowchart ที่แยกบุคคลที่ทำงานและ ขั้นตอนที่บุคคลดังกล่าวเกี่ยวข้อง
     p7 height=335
ตัวอย่าง Swim Lane Diagram ที่มา http://infomation54.blogspot.com
swimlanediagram height=1024
ตัวอย่าง Swim Lane Diagram ที่มา http://www.reg.kmitl.ac.th/km/file/Flow%20Chart.pdf
     แนวทางการเขียน Swim Lane Diagram จาก Flowchart
 
  • กำหนด Lane ของแต่ละคน(ตำแหน่ง)ที่เกี่ยวข้องกับ Flowchart ได้ทั้งแนวตั้งหรือแนวนอน โดยให้ระบุชื่อหรือตำแหน่งงานที่เกี่ยวข้องลงไปในแต่ละ Lane
เทคนิค เมื่อ Flowchart กำหนดให้ ใช้หัวลูกศรแสดงทิศทางการไหลของข้อมูลจากบนลงล่างหรือซ้ายไปขวา (ยกเว้นที่ต้องทาซ้ำ) Swim Lane Diagram ที่สะดวกก็คือ การแบ่ง Lane ในแนวตั้ง
 
  • ย้ายสัญลักษณ์ใน Flowhart ไปวางไว้ใน Lane ของแต่ละคนที่เกี่ยวข้อง หลังจากนั้นลบชื่อผู้ปฏิบัติงานออกเหลือเพียงตำแหน่งงานในแต่ละ Lane
เอกสารอ้างอิง
 http://stang.sc.mahidol.ac.th/E-Handout/PDF/Visio.pdf
 http://huso.pn.psu.ac.th/main/document/Manuals/Complete_Visio.pdf   


ที่มา: http://clpark.rmuti.ac.th/suthep/km/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%9C%E0%B8%B1%E0%B8%87%E0%B8%87%E0%B8%B2%E0%B8%99-flowchart-%E0%B9%80%E0%B8%9A%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%87-2
« แก้ไขครั้งสุดท้าย: 3 พฤศจิกายน 2016, 13:00:49 โดย smf »

ออฟไลน์ tomzt

  • Newbie
  • *
  • กระทู้: 1
  • พอยท์: 0
    • ดูรายละเอียด
  • คอมเมนต์สินค้า: (0)
Re: การเขียนผังงาน (Flowchart) ด้วย Microsoft Visio
« ตอบกลับ #1 เมื่อ: 3 พฤศจิกายน 2016, 11:06:36 »
ขอบคุณที่ช่วยเผยแพร่ บทความของผมนะครับ
แต่ไม่น่าตัดหัวบทความออก เพราะมีตอนที่ 1 เกี่ยวกับเรื่อง Flow chart คนอ่านจะได้มีพื้นฐาน
อีกทั้งมองเหมือนว่า คุณ ดัดแปลงเนื้อหาที่ผมต้องการสื่อถึงผู้อ่าน



ออฟไลน์ smfTopic starter

  • "ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,353
  • พอยท์: 4
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
  • คอมเมนต์สินค้า: (1)
Re: การเขียนผังงาน (Flowchart) ด้วย Microsoft Visio
« ตอบกลับ #2 เมื่อ: 3 พฤศจิกายน 2016, 13:01:57 »
 ^dozo

แท็ก:
 
แชร์บทความ...
โค้ดแบบ forum
(BBCode)
โค้ดแบบ site/blog
(HTML)