Diascii
Diascii is a Javascript tool that converts ASCII-art
diagrams into beautiful structured HTML. Inspired by the
fabulous markdeep
package, Diascii is able to recognise and convert complex
structures, like containers or arrows, to well defined HTML
entities. This approach enables unlimitless customisation
through CSS without compromising the ASCII-art
readibility!
Once Diascii is imported, anything within the
tags diascii is parsed. See the example below:
.------------.
----->| Example |----->
'------------'
.------------.
----->| Example |----->
'------------'
Box objects
A box object is simply an ASCII-art container that is
converted into an HTML div. It can be tagged with a specific
class or id, and can be nested:
.-#controller-----. .-agent----------. .-nested---------.
| | | | |.--------------.|
| Controller | | Agent | || Nested Block ||
| | | | |'--------------'|
'-----------------' '----------------' '----------------'
Notice that the resulting HTML is rich of Diascii classes
that can be used to customise the diagram style. For instance,
in this example Diascii was able to recognise that the
text Controller is almost centered. As a result, the
corresponding span element is tagged
with DIASCII_ALIGN_CENTERISH.
Text placed at the border of a box is identified and tagged
with the DIASCII_ALIGN_* classes. Text surrounded with
colons is also tagged:
.-----------------. .----------------.
| req|---->| |
|:Controller: ack|<----| Agent |
| | | |
'-----------------' '----------------'
^ ^
'---------. .----------'
| |
.-----------.
| Monitor |
'-----------'
Any box can be associated with classes or an id:
.-#foo-bar0-bar1-.
| Foo box |
'----------------'
Arrows can cross one above the others:
.-----.
.---. .> F D <-. | .---.
| A | -------|---|-------> | B |
'---' '- E <' '- C <' '---'
Here a more complex example:
^ | .-
'---|-|->
<--------
<-|-|--.
-' v v
Arrows can have multiple start or end points:
a ---> A -. .-> x -+-> X
.-> B +-> O -+-> y '-> Y
b -+-> C -' '-> z ---> Z
Arrow style can be changed through CSS...
A -+-> B
'-+---> C
D <-----|-----'
E <----+
'--> F
Yet another example of CSS customisation:
.-----.
input ------>| A |------> output
.-->| |---.
| '-----' |
| .---. |
'----| B |<---'
'---'
Big arrow test:
.---------. .---------.
| | | |
| EL1 |------->| EL2 |
| | | |
'---------' '---------'
First example
.-#cntrl-------. ab .---------.
| |a ---->|b a |
| Controller |.----->| Agent |
| x -> y |<------| |
| .-#cont----. | .--. '---------'
| | A | | | | .----> -->
| | B | | '--' | prova .--.
| '----------' |------' <----'
'--------------' <------
.--pluto-----.
| @testC |
'------------'
| ^ <-. .-. .-
| | | | | |
'-' --' v | '->
^ | --. .-. .->
| | | | | |
'-' <-' | v '-
^ <-. .-. .
| | | |
'-' ' v '->
^ . .-. .->
| | | |
'-' <-' v ' end .---.
.--. ^ | |
start -. ob|st|a|cle| .-'
'-. .-' | '---' |
'-' '-------'
------------------------->
^
|
-|||-->
vv
^
|
<--|||---
vv
^
|||
<--------
|||
vv|
^
.||
-------->
||'
vv
.-------------.
| .-. .-> |
| | | .-' |
| --|---|---> |
| | '-' |
'-------------'