# 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](00_introduction.md)** — 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](01_concepts.md)** — 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](02_hands_on.md)** — 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](03_exercises.md)** — 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](04_project.md)** — 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](05_assessment.md)** — 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](06_resources.md)** — 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 -->](00_introduction.md)**

Or jump directly to:
- [Core Concepts](01_concepts.md) — Understand the fundamentals
- [Hands-On Practice](02_hands_on.md) — Start building immediately
- [Check Prerequisites](prerequisites.md) — Ensure you're ready
- [Learning Objectives](objectives.md) — 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 -->](00_introduction.md)**