Phase 2: Visual Tools & Version Control

Transform Your Documentation with Diagrams and Version Control

Welcome to Phase 2 (Visual Documentation & Version Control). Over the next 3 hours, you'll master two interconnected skills that will permanently upgrade how you create, manage, and share professional documentation: Mermaid diagrams and Git version control.

Workshop Overview

This session builds on the VS Code foundations from Phase 1 (Foundations). You'll learn to generate stunning visual diagrams from plain text, track every change to your work with Git, and publish your portfolio to GitHub — all from within VS Code using visual tools like GitLens and the Source Control panel. No command-line expertise required.

Learning Outcomes

By completing this workshop, you will:

Visual Documentation

• Create flowcharts, Gantt charts, sequence diagrams, and mind maps using Mermaid syntax
• Generate professional diagrams from text descriptions in seconds
• Integrate visual documentation into your projects and reports
• Export and share diagrams in multiple formats

Version Control Mastery

• Understand Git concepts (repositories, commits, branches, remotes)
• Use VS Code Source Control panel and GitLens for visual Git workflows
• Write meaningful commit messages following conventional commit standards
• Create branches, resolve merge conflicts, and manage pull requests

Professional Workflow

• Combine Mermaid diagrams with version-controlled documentation
• Push work to GitHub for cloud backup and collaboration
• Build a professional portfolio that showcases your projects
• Establish daily Git habits that protect your work

Workshop Structure

Chapter Navigation

1. Introduction — From Chaos to Clarity (10 min)

   • Why visual documentation matters for every profession
   • The version control paradigm shift
   • Real-world success stories

2. Core Concepts — Visual Thinking & Version Control (30 min)

   • Mermaid diagram types and when to use each
   • Git mental models: repos, commits, branches
   • GitHub as your professional platform
   • Security and privacy considerations

3. Hands-On Practice — Mastering Git the Modern Way (90 min)

   • GitLens: inline blame, file history, commit graph
   • VS Code Source Control panel workflows
   • GitHub Desktop and Git Graph extensions
   • Modern Git workflows (GitHub Flow)
   • Merge conflict resolution

4. Practical Exercises — Sharpen Your Skills (30 min)

   • 5 progressive exercises from beginner to advanced
   • Mermaid diagram creation challenges
   • Git workflow practice scenarios
   • Real-world documentation tasks

5. Real Project — Apply to Your Actual Work (20 min)

   • Choose from 4 professional project paths
   • Build a complete visual documentation deliverable
   • Version-control a real project end to end
   • Measure your efficiency gains

6. Assessment — Validate Your Mastery (10 min)

   • Knowledge checks on diagrams and Git concepts
   • Practical tasks demonstrating your skills
   • Self-assessment and reflection
   • Certification preparation

7. Resources — Continue Your Journey

   • Curated tool and extension lists
   • Learning paths for ongoing development
   • Community links and support channels
   • Advanced techniques and references

Who This Workshop Is For

Perfect For:

• Academics & Researchers: Visualise methodologies, track paper revisions, manage citations
• Business Professionals: Create project timelines, document processes, build portfolios
• Creative Professionals: Map workflows, version creative assets, collaborate visually
• Project Managers: Build Gantt charts, track deliverables, manage team contributions
• Anyone who creates documents and wants to never lose work again

You'll Succeed If You:

• Completed the Phase 1 VS Code setup workshop (or have VS Code configured)
• Can use basic computer applications confidently
• Have a real project you'd like to visualise or version-control
• Are open to learning visual tools that replace manual diagramming

No Experience Required In:

• Programming or software development
• Command-line or terminal usage
• Previous Git or version control experience
• Graphic design or diagramming software

Technical Requirements

Software (Should Be Ready from Phase 1):

• VS Code installed and configured
• GitLens extension (eamodio.gitlens)
• Markdown All in One (yzhang.markdown-all-in-one)
• Mermaid Markdown support (bierner.markdown-mermaid)
• Git installed (bundled with VS Code on most platforms)
• A free GitHub account

Hardware:

• Computer running Windows 10+, macOS 10.15+, or Linux
• 8GB RAM recommended
• Stable internet connection for GitHub

Workshop Timing

Phase	Duration	Activity
Concepts	30 min	Visual thinking and Git fundamentals
Hands-On	90 min	Mermaid diagrams, GitLens, workflows
Exercises	30 min	Progressive skill challenges
Project	20 min	Real-world deliverable creation
Assessment	10 min	Mastery validation

Total: 3 hours (take breaks as needed — the content is modular)

Quick Readiness Check

• VS Code running with extensions from Phase 1
• GitHub account created (https://github.com/signup)
• Real project or document in mind to visualise
• 3 hours of focused time available
• Enthusiasm for visual communication

Begin Your Transformation

Start with the Introduction -->

Or jump directly to:

• Core Concepts — Understand the fundamentals
• Hands-On Practice — Start building immediately
• Check Prerequisites — Ensure you're ready
• Learning Objectives — See detailed outcomes

Support

• Questions? Use the workshop Discord channel
• Stuck? Reference the troubleshooting sections in each chapter
• Share Success: Post your diagrams in #phase-2-wins

---

After this session, you'll create professional diagrams in seconds and never lose work again. Let's begin!

Start Phase 2: Introduction -->