permalink

uml image

Edit the textarea below with PlantUML markup. You can create sequence, state, use case, component, timing, c4, etc. diagrams. 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

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.
  • 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:


Saving pure plantuml diagrams is not currently supported. Try creating a diagram from a GitHub Repo - these can be saved.