GitUML

The Missing Visual Layer

AI Chatbots explain lines of text. GitUML visualizes the flow.

Tools like Copilot are incredible at explaining lines of code. But a wall of text can't show you the flow.

GitUML acts as a wrapper around the AI, forcing it to generate rich technical articles instead of chat streams. We automatically embed the right diagram (Class, Sequence, State, Activity) at exactly the right point to illustrate the logic.

Structure vs. Syntax

Don't just read the syntax. See the structure.

• Class Diagrams: Visualize code structure and hierarchy.
• Sequence & Activity: Trace how data moves and functions interact.
• State Diagrams: Perfect for understanding complex logic states.

Architecture or Algorithms

It's simple: Check the files you want to visualize.

Select many files to see the big picture architecture and how modules connect. Or select a single file to visualize a complex algorithm or spaghetti-code function.

Artifacts vs. Chat

Chat streams are ephemeral and fragmented.

GitUML builds Structured Knowledge. Generate professional documentation (HTML/Markdown/PDF) that you can save to your repo, share with your team, or use for client handovers.

Classic Diagramming Tools

Strict UML generation for precise engineering.

• Diagrams from git repositories - automatic diagram updates when you push!
• Upload source code files (Python, Java, etc.)
• Live UML Fiddle converts source code into UML as you type
  • UML Fiddle (Typescript / Javascript / JSX / TSX / Vue)
  • UML Fiddle (Python)
  • UML Fiddle (Java)
  • UML Fiddle (C#)
  • UML Fiddle (Objective C)
• Generate the more powerful Literate Code Map diagrams

Understand code quickly

Rapidly generate diagrams from programming source code.

• Diagrams from git repositories - automatic diagram updates when you push!
• Upload source code files
• Live UML Fiddle converts source code into UML as you type
  • UML Fiddle (Typescript / Javascript / JSX / TSX / Vue)
  • UML Fiddle (Python)
  • UML Fiddle (Java)
  • UML Fiddle (C#)
  • UML Fiddle (Objective C)
• Generate the more powerful Literate Code Map diagrams

A revolution in documentation

GitUML rapidly produces beautiful UML class diagrams every time.

• Diagrams automatically update when you push code using git
• Diagrams are always up to date
• This lets programmers focus on coding instead of fussing with drawing tools.

Rethinking Code Visualisation

Making software diagramming useful to today's modern, agile, code-centric programmers

• Easy reverse engineering into UML by simply selecting files from GitHub repositories. File uploads and "UML Fiddles" (direct code to diagram) mode too!
• When new code changes are pushed, diagrams are updated automatically thus remain up to date with the code. This maintains diagram accuracy/usefulness and requires less diagram maintenance - saving programmer time.
• UML diagrams can sometimes be too abstract for programmers to find useful. GitUML supports evolving reverse engineered UML diagrams into Literate Code Maps, which are innovative, powerful "Tuftian" visualisations that empower the programmer to understand complex code, add features and fix bugs more quickly.
• Literate Code Maps combine class and sequence diagrams into the one diagram, with numbered steps which lead the reader's eye, step by step, through the diagram. Each diagram box (which can be a class, file or any container) can contain one or more code compartments where you can add real source code fragments and rich narrative commentary. See the Literate Code Map manifesto for more information.
• Easy to share rich, zoomable diagrams via urls.
• Using textual PlantUML markup for flexible diagram editing rather than $$ and fiddly tools. Each GitUML diagrams is built from a blend of both automated reverse engineering and additional custom diagram markup.
• GitUML is appealing to organisations who understand that powerful, insightful, diagrams containing rich detail are a boon to new programmers joining a team, increasing productivity thus reducing new staff onboarding times. They can capture knowledge when programmers leave a project, too.
• The idea of building a Code Map is based on what many programmers already do when taking notes in their notebooks and reading code. The process of building a Code Map will give a programmer understanding of any complex software behaviour, which empowers the programmer to add features and gets bugs fixed more quickly.
  
  The process of building a Code Map is a secret weapon to tackle software complexity, spaghetti code, and complex Object Oriented code. Spend days browsing code, guessing and hacking - or respect the problem, do it right, and in an hour or two have a solution by building a code map.
• Consulting services available to facilitate the use of GitUML in your organisation. Custom hosting for sensitive, non GitHub codebases available.

Point and Click

Browse any git repository on the web and select the files you want to visualise.

• Popular public repositories listed
• Browse your own repositories
• Automatic layout - saving you time

Gallery View

Access your diagrams via a thumbnail gallery.

• Click to edit or delete, duplicate etc
• View descriptions and user comments
• Search by repository or tags

Keep diagrams simple

Communicate what's important

• Select only the files and classes that you want
• Capture knowledge
• Each diagram tells a story, your way

Refine your diagrams

Add anything you want to your diagrams

• Attach yellow text notes to any class
• Add additional classes & relationships
• Use "point and click" to add common elements or use PlantUML markup
• Evolve your reverse engineered UML diagram into a powerful Literate Code Map diagram containing source code fragments and much more. Blend automatic with custom diagram elements.

Productive Handovers

Developers with knowledge can document designs rapidly before they leave

• Preserve knowledge of the code
• Offboard existing staff with more confidence.
• Onboard new staff more quickly - saving you money

Share your diagrams

Diagrams are URLs

• Each diagram is a permalink URL internet resource.
• Share diagrams with your team, in print, blogs and documentation.
• Turn off GitUML git push auto update to lock a diagram to a moment in time.

Attract contributors

Get more contributors to Open Source projects. Contribute more.

• Key design diagrams of Github projects helps everyone.
• Attract more contributors by making it easier for them to understand the code.
• Contribute more productively to well documented projects.

Feedback / Contact