asciiDoc - draw screen prototypes GUI mockup

Question

I recently discovered asciidoc as an amazing tool to create software documentation. Does anybody knows a way to draw screen prototype / GUI mockup?

Probably there is no direct integration like it is plantuml for diagrams. If so, is there a lean windows or linux tool to draw gui prototypes offline and export as vector graphic which can be imported within an asciidoc document?

Answer 1

The https://plantuml.com/salt does exactly that. You have to include Asciidoc Diagram which is required for any PlantUml diagram.

Here is an example from the user guide:

@startsalt
{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
@endsalt

I tested it with the Intellij IDEA plugin, HTML5 and PDF backend with the maven plugin. It works fine.

It generates WebP (https://developers.google.com/speed/webp) which might be a deal breaker for some as it is not widely adopted (e.g: imgur does not support).

Note: The guide uses the <b> for bold however Creole is supported so the ** works too.

Answer 2

The example above is really nice :-)

A WYSIWYG integration in eclipse can be found at https://marketplace.eclipse.org/content/asciidoctor-editor

The output of the example inside editor looks like:

PS: I am the author of the mentioned plugin.

Answer 3

I'm using ditaa for drawing: http://ditaa.sourceforge.net/

If the odds are good i'll start a project to bring some WYSIWYG =)

Ex: - mockup name and age input fields

   [ditaa]
   --
   /-------------------------\
   |       +---------------+ |
   |  name:|               | |
   |       +---------------+ |
   |                         |
   |       +---------------+ |
   |   age:|               | |
   |       +---------------+ |
   |                         |
   |/----------------------\ |
   ||      Validate        | |
   |\----------------------/ |
   |                         |
   \-------------------------/
   --

Render