add documentation

README.md

@@ -19,7 +19,9 @@ PlantUML Server is a web application to generate UML diagrams on-the-fly.
 [PlantUML is **not** affected by the log4j vulnerability.](https://github.com/plantuml/plantuml/issues/826)
 
 
-![PlantUML Server](https://raw.githubusercontent.com/plantuml/plantuml-server/master/screenshots/screenshot.png)
+![PlantUML Server](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/screenshot.png)
+
+More examples and features about the Web UI can be found in [docs/WebUI](https://github.com/HeinrichAD/plantuml-server/tree/master/docs/WebUI).
 
 To know more about PlantUML, please visit https://plantuml.com.
 

docs/WebUI/README.md

@@ -0,0 +1,24 @@
+# PlantUML Server Web UI
+
+## Alice and Bob
+
+![alice-bob](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/alice-bob.gif)
+
+## Multipaging
+
+Just see what you want.
+And if its the second diagram page, so be it.
+
+![multipaging](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/multipaging.gif)
+
+## Split Screen
+
+You have multiple monitors? You want to share your Window but only show the diagram and not the code? Than do it!
+
+![multipaging](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/split-screen.gif)
+
+## More
+
+- [Settings](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/settings.md)
+- [PlantUML Language Features](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/language-features.md)
+- [Mobile Version](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/mobile.md)

docs/WebUI/language-features.md

@@ -0,0 +1,31 @@
+# PlantUML Language Features
+
+## Auto Completion
+
+### Icons
+
+- type `<&` to get a list of PlantUML available icons
+- see a preview of the suggested icon in its description
+
+![icons](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/auto-completion-icons.gif)
+
+### Themes
+
+- type `!t` to get the suggestion `theme`
+- type `!theme ` to get a list of (local) available PlantUML themes.
+
+![themes](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/auto-completion-themes.gif)
+
+
+## Validation
+
+### `@start...` and `@end...`
+
+- `@start...` should always be the first command
+- `@end...` should alway be the last command
+- `@start...` should only exists once
+- `@end...` should only exists once
+- `@end...` should have the same type as `@start...`  
+  e.g.: `@startjson ... @endjson`
+
+![start-end](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/validation-start-end.gif)

docs/WebUI/mobile.md

@@ -0,0 +1,12 @@
+# Mobile Version
+
+PlantUML Server is mobile ready.
+
+## Alice and Bob
+
+![alice-bob](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/mobile-alice-bob.gif)
+
+
+## Settings
+
+![settings](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/mobile-settings.gif)

docs/WebUI/settings.md

@@ -0,0 +1,15 @@
+# Settings
+
+## Rendering Type
+
+You want always to work and see only the SVG version? Not Problem.  
+Choose the rendering type you want to see.
+
+![rendering-type](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/settings-rendering-type.gif)
+
+## Theme
+
+The sun is too bright? You live on the dark side or only in the basement?  
+Choose between the `dark` and `light` theme.
+
+![theme](https://raw.githubusercontent.com/plantuml/plantuml-server/master/docs/WebUI/gifs/settings-theme.gif)