Skip to main content
Creative Technology

Phase 2: Visual Tools & Version Control

10 Modules
Chapter 9: Learning Objectives - Workshop 01 Afternoon: Visual Tools & Version Control90%

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 --> | Check Prerequisites | Back to Workshop Overview