Sketching UI with text tools

The idea to sketching UI, or other types of drawing, using text file is not new. Text can be embedded into text files so a whole document can be defined using only text. This is the approach used by Sphinx, with it you can use reStructuredText to define your HTML or PDF documentation.

Sphinx is integrated with PlantUML so you are able also to define UI, UML diagrams, charts using text.

The subproject used by PlantUML to define UI sketch is called Salt. What I do not like about Salt it's that it uses lines, curves and text to draw a UI sketch. This way the result is not realistic.
And ok... I would like to exercise with ANTLR.

The task that let me include realistic screenshots into my documents was divided into two subprojects:

1. I wrote an ANTLR parser for the part of Salt syntax I needed so far.
   This result in the Salt9000 project.
2. then I integrated Salt9000 into a customization version of PlantUML.
   This result in the Plant UML 9000 project.

Don't be confused about my real target: I would prefer to generate my documentation directly from source code artifacts, as you can do with the mbeddr project. However even with such powerful tool, it seems to me that a DSL to define UI it's still useful while you are writing first requirements.

An example

Let's say you want to design a login form like this:

instead of open a graphic tool with line, curves, color... you can enter this text into a definition file and process it with Salt9000:

{
  {* Help}
  {Username: | "          " | Password: | "          "}
  {[Ok] | [Cancel]}
}

For reference the image generated by original Salt would be:

With Sphinx and PlantUML you don't have to generate this image manually, just include something like this in your source document to have your image rendered into the PDF or HTML that Sphinx generates:

.. uml::

   @startsalt9000
   {
     {* Help}
     {Username: | "          " | Password: | "          "}
     {[Ok] | [Cancel]}
   }
   @endsalt9000