Select Files

    Please select one or more files

    Click on a file to preview contents. Multi-select using CMD.

    Diagram Preferences...^D

    Remove unwanted elements from Diagram:

    List the diagram elements to remove, one name per line e.g. MyClass

    Specifying attributes and methods will remove them from all Boxes / Classes - unless more specific syntax is used e.g. box.attribute or box.method()

    You can remove diagram elements on a per module basis instead by clicking on a file and selecting 'Options'.

    Notes...

    Refine UML....^E

    Edit the textarea below with additional PlantUML markup to create additional UML objects or to customise the UML you have generated. quick help
    * Try evolving your UML into the more powerful Literate Code Maps - by adding code compartments to your UML classes/modules, which can contain rich text and useful code fragments. quick help

    Your custom PlantUML markup below is added to the markup generated by parsing your Python or Java code.   Hit the Generate UML button to see the resulting diagram. Or hit ^ENTER.

    • Use the Add Snippet dropdown to add useful markup snippets
    • By referring to the names of your own classes and modules, you can attach notes and extra associations to them
    • Hide classes or modules with hide name
    • Define extra classes e.g. Object <|-- ArrayList means ArrayList class inherits from class Object
    • Add notes by defining a note e.g. note "blah\nblah." as N2 then associate that note with one or more objects e.g. Object .. N2 You can also define multiline notes using the note/end note syntax.
    • Add additional associations to other classes which gitUml may not have picked up. e.g. Class1 <|-- Class2 or Class3 .. Class4.
    • Add extra - and . symbols to make the lines in the diagram longer. For example <|-- is a longer association line than <|-
    • Setting colours, heading, footers, fonts, gradients and embedded html bold etc. is all possible - inside notes and classes.

    To turn a UML class or module into a Literate Code Map box, add a "code compartment" with the following markup: 

    class YourClass {

    method("onClick", "params")

    your comments 
    go here 

    ```
    your code
    goes here
    ```

    possibly <b>more</b> comments etc.
}
    Hit the Generate UML button to see the resulting diagram. Or hit ^ENTER.

    • Use the Add Snippet dropdown to add useful markup snippets, incl. the above "code compartment" snippet.
    • By referring to the names of your own reverse engineered classes and modules, you can attach notes and add code compartments to them - simply define the class again with the above code compartment markup.
    • Tip: Click the 'Show Generated PlantUML' checkbox at the bottom of the page then copy/paste class names into your custom PlantUML markup area. Remember, you define the same class several times and the contents will be blended.
    • Add cross references with xref("NN", "source") using whatever numbers or letters you want as NN. Use xref("NUM") to create a destination/anchor. Use the 'Add Snippet' dropdown to easily these snippets at the current cursor position.
    • See normal PlantUML quick help for more tips.
    Please choose the method you want to create a compartment for:
    Click in the area above to use the editor

    Repository...

    Generate UML from which GitHub repository?

    Demo Repositories

    Select a quickstart demo GitHub repository

    Python

    Official GitUML Python source code playground

    Pynsource repository

    Java

    Java Algorithms

    Java openjdk-jfx

    Java Design Patterns

    Typescript

    Typescript Examples from Antlr4 Parser

    Typescript Design Patterns

    Javascript

    Javascript Algorithms by trekhleb

    Javascript TodoMVC-oo project

    C#

    C# Algorithmia - lots of visualisation possibilities here

    Objective C

    repository by dzenbot, "A drop-in UITableView/UICollectionView superclass category for showing empty datasets whenever the view has no content to display"

    Delphi / Free Pascal

    by project-jedi

    Enter Repository by Name

    Enter Repository Url

    Enter in any URL associated with the Github repository that you want e.g.

    Url:

    Choose a Popular Repository

    Have fun picking from a curated list of repositories and probing them for their UML structures!


    * Refresh Current Repository Tree

    This diagram is based on the repository tree

    • User: abulka
    • Repo: pynsource
    • Sha: 979436525c57fdaeaa832e960985e0406e123587

    Click Refresh to update the repository tree list of files (above) to the latest state of master.

    Warning! You are not logged in so any checked files in the repository tree above will become unchecked. If you are just playing around - then that's fine!

    58 Github API calls left this hour * You are using a complimentary community token.

    Requires that you login.