# Learning Objectives - Workshop 01 Afternoon: Visual Tools & Version Control ## Workshop Overview Transform how you create, track, and share professional documentation. By the end of this 3-hour session, you'll generate stunning diagrams from text, track every change with Git, and publish your work to a professional portfolio on GitHub. ## Primary Learning Outcomes By the end of this workshop, you will be able to: ### 1. Mermaid Diagram Creation (Core Skills) **You will be able to:** - Create flowcharts to document processes and decision logic - Build Gantt charts for project timeline planning - Write sequence diagrams showing interaction flows - Generate mind maps for brainstorming and idea organisation - Produce entity-relationship diagrams for data modelling - Use the Mermaid Live Editor to prototype and debug diagrams - Integrate Mermaid diagrams into Markdown documents **Success Criteria:** - At least 3 different diagram types created from scratch - Diagrams render correctly in VS Code Markdown preview - Can modify existing diagrams to add nodes, connections, and styling - Understands which diagram type suits which use case ### 2. Git Version Control (Core Skills) **You will be able to:** - Initialise a Git repository for any project - Stage and commit changes with meaningful messages - View file history and compare versions visually - Create and switch between branches - Merge branches and resolve conflicts - Push work to GitHub for cloud backup - Use conventional commit message format **Success Criteria:** - Repository created with at least 5 meaningful commits - Successfully created and merged a feature branch - Can explain the stage-commit-push workflow - Commit messages follow conventional format ### 3. Visual Git Tools Mastery **You will be able to:** - Use GitLens inline blame to see who changed what and when - Navigate file history with the GitLens timeline view - Read and interpret the visual commit graph - Use VS Code Source Control panel for staging and committing - Resolve merge conflicts using the 3-way merge editor - Compare branches and commits visually **Success Criteria:** - GitLens configured with inline blame annotations - Can navigate file history and restore previous versions - Source Control panel used for all Git operations (no command line needed) - Successfully resolved at least one merge conflict ### 4. GitHub Integration **You will be able to:** - Create repositories on GitHub (public and private) - Push local work to remote repositories - Create and review pull requests - Use GitHub as a professional portfolio - Understand repository visibility and access controls **Success Criteria:** - At least one repository pushed to GitHub - Pull request created and merged - Profile shows meaningful contribution activity - Understands difference between public and private repos ### 5. Professional Documentation Workflow **You will be able to:** - Combine Mermaid diagrams with version-controlled Markdown - Maintain a documentation project with clear history - Collaborate on documents without email attachments - Apply visual documentation to real work scenarios - Use AI assistants (Claude Code, GitHub Copilot) to generate diagrams **Success Criteria:** - Complete documentation project with diagrams and version history - Can describe the end-to-end workflow to a colleague - Identified at least 3 use cases for your own work - Documented time savings compared to traditional approach ## Detailed Skill Breakdown ### Beginner Level (First 30 Minutes — Concepts) **Knowledge:** - [ ] Understand what Mermaid is and why text-based diagrams are powerful - [ ] Explain the difference between Git and GitHub - [ ] Describe the purpose of commits, branches, and remotes - [ ] Identify which diagram type suits common documentation needs - [ ] Understand why version control matters for non-developers **Skills:** - [ ] Read and interpret basic Mermaid diagram syntax - [ ] Recognise Git concepts in the VS Code interface - [ ] Navigate the GitLens sidebar panels - [ ] Open Markdown preview to view rendered diagrams **Mindset:** - [ ] Overcome "version control is for developers" assumption - [ ] See diagrams as text, not graphics - [ ] Trust that visual tools remove the command-line barrier - [ ] Understand that your work deserves proper version tracking ### Intermediate Level (90-Minute Hands-On) **Knowledge:** - [ ] Know the Mermaid syntax for flowcharts, Gantt charts, sequence diagrams, and mind maps - [ ] Understand the three-stage Git workflow (working directory, staging, repository) - [ ] Recognise conventional commit message format - [ ] Understand GitHub Flow branching strategy **Skills:** - [ ] Create multi-node Mermaid diagrams with styling - [ ] Stage, commit, and push changes from VS Code - [ ] Use GitLens blame, file history, and commit graph - [ ] Create and merge branches using visual tools - [ ] Resolve merge conflicts with the 3-way merge editor **Mindset:** - [ ] Confidence in creating diagrams from scratch - [ ] Comfort with the Git workflow as a daily habit - [ ] Strategic thinking about when to commit and branch - [ ] Willingness to experiment on branches ### Advanced Level (Exercises, Project, and Assessment) **Knowledge:** - [ ] Understand pre-commit hooks and automated quality checks - [ ] Know advanced Mermaid features (subgraphs, styling, click events) - [ ] Comprehend interactive rebase and history cleanup - [ ] Understand collaboration workflows (pull requests, code review) **Skills:** - [ ] Build complex multi-layer diagrams for real projects - [ ] Manage a complete Git workflow independently - [ ] Apply diagrams and version control to a real deliverable - [ ] Troubleshoot common Git issues (detached HEAD, wrong branch commits) **Mindset:** - [ ] Professional documentation habits established - [ ] Continuous improvement through version tracking - [ ] Sharing and collaboration as default mode - [ ] Ready to teach others the basics ## Profession-Specific Objectives ### For Academics & Researchers **You will be able to:** - Create methodology flowcharts for research papers - Build Gantt charts for grant proposal timelines - Track paper revisions with meaningful commit history - Collaborate on research documents via GitHub - Visualise data relationships with entity diagrams ### For Business Professionals **You will be able to:** - Document business processes with flowcharts - Create project Gantt charts that update as you type - Track proposal and report revisions professionally - Build a client-facing portfolio on GitHub Pages - Visualise organisational structures and workflows ### For Project Managers **You will be able to:** - Build and maintain project Gantt charts in Mermaid - Create sequence diagrams for stakeholder interactions - Track all project documentation changes with Git - Manage team contributions through branches and pull requests - Generate visual status reports from version-controlled data ### For Creative Professionals **You will be able to:** - Map creative workflows and approval processes - Version-control creative briefs and documentation - Build a professional portfolio on GitHub - Create visual project proposals with embedded diagrams - Collaborate on creative documents without file-naming chaos ## Assessment Criteria ### Knowledge Assessment (10 points) **You will demonstrate understanding of:** - Mermaid diagram types and syntax (2 points) - Git core concepts (2 points) - Visual Git tools (GitLens, Source Control) (2 points) - GitHub integration and workflows (2 points) - Professional documentation practices (2 points) ### Practical Skills (15 points) **You will successfully:** - Create a Mermaid diagram from a written description (4 points) - Execute a complete Git workflow (stage, commit, push) (4 points) - Use GitLens to investigate file history (3 points) - Resolve a merge conflict visually (4 points) ### Application & Reflection (5 points) **You will:** - Apply skills to a real project from your work (2 points) - Articulate the value of visual version control to a colleague (3 points) **Passing Score:** 24/30 (80%) ## Success Indicators ### Immediate (End of Workshop) - [ ] At least 3 Mermaid diagram types created - [ ] Git repository with 5+ meaningful commits - [ ] Work pushed to GitHub - [ ] Feature branch created and merged - [ ] Real project deliverable completed ### Short-term (1 Week) - [ ] Using Git for all document work - [ ] Creating diagrams for meeting notes and proposals - [ ] Committing daily with clear messages - [ ] Shared one diagram or repo with a colleague - [ ] Saving 2+ hours per week on documentation ### Long-term (1 Month) - [ ] Professional GitHub profile with active repositories - [ ] Diagram-rich documentation as standard practice - [ ] Team or colleagues adopting visual version control - [ ] Complete audit trail for all important documents - [ ] Contributing to collaborative projects on GitHub ## Learning Pathways ### Minimum Viable Outcome **Basic Proficiency:** - Create simple flowcharts and Gantt charts in Mermaid - Commit and push work to GitHub - Use VS Code Source Control panel confidently - Understand core Git concepts - Never lose work to crashes again ### Target Outcome **Professional Competence:** - Create any Mermaid diagram type from scratch - Full Git workflow with branches and merges - GitLens mastery for file history and blame - GitHub portfolio with multiple repositories - Ready to collaborate and teach others ### Stretch Outcome **Advanced Mastery:** - Complex diagrams with styling, subgraphs, and interactivity - Pre-commit hooks and automated quality checks - Interactive rebase for clean history - Pull request workflows with code review - Team documentation system architect ## Your Commitment ### I Commit To: - [ ] Active participation in all exercises - [ ] Creating diagrams for my actual work, not just examples - [ ] Committing changes regularly with meaningful messages - [ ] Pushing work to GitHub before leaving today - [ ] Practising these skills daily for the next week - [ ] Sharing what I've learned with at least one colleague ### Workshop Promises To You: - Clear, visual-first instructions at every step - Real-world applicable skills you'll use immediately - No command-line intimidation — visual tools throughout - Practical exercises with your own work - Ongoing support through community channels ## Ready to Begin? These objectives represent a fundamental upgrade in how you create and manage professional documentation. By the end of today, diagrams will take seconds instead of hours, and you'll never worry about losing work again. **Let's master visual version control!** --- [Begin Workshop -->](./00_introduction.md) | [Check Prerequisites](./prerequisites.md) | [Back to Workshop Overview](README.md)