NAME

     ___              _ _ ____
    /   |  __________(_|_) __ \
   / /| | / ___/ ___/ / / / / /
  / ___ |(__  ) /__/ / / /_/ /
 /_/  |_/____/\___/_/_/\____/

SYNOPSIS

$> asciio [file.asciio] # GUI application using Gtk3

$> tasciio [file.asciio] # TUI application

$> asciio_to_text file.asciio # converts asciio files to ASCII

DESCRIPTION

Asciio allows you to draw ASCII diagrams in a GUI or TUI. The diagrams can be saved as ASCII text or in a format that allows you to modify them later.

Diagrams consist of boxes and text elements connected by arrows. Boxes stay connected when you move them around.

Both GUI and TUI have vim-like bindings, the GUI has a few extra bindings that are usually found in GUI applications.

Keyboard bindings are the best way to use Asciio, they are listed at the end of this documentation. Bindings can also be modified.

DOCUMENTATION

GUI

      .-------------------------------------------------------------.
      | ........................................................... |
      | ..........-------------..------------..--------------...... |
      | .........| stencils  > || asciio   > || box          |..... |
      | .........| Rulers    > || computer > || text         |..... |
      | .........| File      > || people   > || wirl_arrow   |..... |
 grid----->......'-------------'| divers   > || axis         |..... |
      | ..................^.....'------------'| ...          |..... |
      | ..................|...................'--------------'..... |
      | ..................|........................................ |
      '-------------------|-----------------------------------------'
                          |
           context menu access some commands
           most are accessed through the keyboard

Exporting to ASCII

You can export to a file in ASCII by using a '.txt' file extension.

You can also export the selection, in ASCII, to the Primary clipboard.

Elements

boxes and text

                .----------.
                |  title   |
 .----------.   |----------|   ************
 |          |   | body 1   |   *          *
 '----------'   | body 2   |   ************
                '----------'
                                      any text
                            (\_/)         |
        text                (O.o)  <------'
                            (> <)

if-box and process-box

   .--------------.    
  / a == b         \     __________
 (    &&            )    \         \
  \ 'string' ne '' /      ) process )
   '--------------'      /_________/
   

user boxes and exec-boxes

For simple elements, put your design in a box, with or without a frame.

The an "exec-box" object that lets you put the output of an external application in a box, in the example below the table is generated, if you already have text in a file you can use 'cat your_file' as the command.

  +------------+------------+------------+------------+
  | input_size ‖ algorithmA | algorithmB | algorithmC |
  +============+============+============+============+
  |     1      ‖ 206.4 sec. | 206.4 sec. | 0.02 sec.  |
  +------------+------------+------------+------------+
  |    250     ‖     -      |  80 min.   | 2.27 sec.  |
  +------------+------------+------------+------------+

wirl-arrow

Rotating the end clockwise or counter-clockwise changes its direction.

        ^            ^          
        |    -----.   \         
        |         |    \           
        '----     |     '------- 
  ------>         |             
                  v             
                  

multi section wirl-arrow

A set of whirl arrows connected to each other.

 .----------.                     .
 |          |                \   / \
    .-------'           ^     \ /   \
    |   .----------->    \     '     .
    |   '----.            \          /
    |        |             \        /
    '--------'              '------'
    

angled-arrow and axis

   -------.       .-------
           \     /
            \   /            ^         
                             |   ^     
            /   \            |  /      
           /     \           | /       
    ------'       '-------    -------->
  

Examples

                             .----Base::Class::Derived_B
                            /
 Something::Else           /
         \                .-------Base::Class::Derived_C 
          \              /
           '-------Base::Class
                    '       \
                   /         '----Latest::Greatest
     Some::Thing--'                                           

  _____ 
 | ___ |
 ||___|| load
 | ooo |--.------------------.------------------------.
 '_____'  |                  |                        |
          v                  v                        v
  .----------.  .--------------------------.  .----------------.
  | module C |  |         module A         |  |    module B    |
  '----------'  |--------------------------|  | (instrumented) |
       |        |        .-----.           |  '----------------'
       '---------------->| A.o |           |          |
                |        '-----'           |          |
                |   .------------------.   |          |
                |   | A.instrumented.o |<-------------'
                |   '------------------'   |
                '--------------------------'

Unicode example

   ╭───────────────────────────────────────────────────────╮
   │ 中文韩文和unicode符号支持以及全新的菱形元素           │
   │ Chinese Korean and unicode symbols and rhombus object │
   ╰───────────────────────────────────────────────────────╯
                        ,',
                      ,'   ',
                    ,'       ',
          ╭────────:           :───────────╮
          │         ',       ,'            │
          │           ',   ,'              │
          │             ','                │
          │              │                 v
          v              v              ⎛     ⎞
        ┌───┐          ╭───╮            ⎜     ⎟
        │   │          │   │            ⎜     ⎟
        └───┘          ╰───╯            ⎝     ⎠

        ┌──────────────┐          ┌──────────────┐
        │ 主机1(host1) │          │ 主机2(host2) │
        └──────────────┘          └──────────────┘
          ^   ^                           ^   ^
          │   │                           │   │
          │   ╰───────────────────────╮   │   │
          │                           │   │   │
          │       ╭───────────────────│───╯   │
          │       │                   │       │
    PCIEx4│ PCIEx4│            PCIEx4 │ PCIEx4│
        ┌─────────────┐           ┌─────────────┐
        │ HBA card1   │           │ HBA card2   │
        └─────────────┘           └─────────────┘

## Exporting to SVG

The "goat" project (https://github.com/blampe/goat) must be installed.

Bindings

 <Enter>            Edit selected element

 <d>                Delete selected element(s)

 <u>                Undo

 <C>-r              Redo

 <.>                Quick link

 <,>                Quick copy

 <r>                Add vertical ruler

 <A-r>              Add horizontal ruler

 <R>                Remove rulers

 Moving elements:
     <h>                Move selected elements left
    
     <j>                Move selected elements down
    
     <k>                Move selected elements up
    
     <l>                Move selected elements right
    
    
     <Left>             Move selected elements left
    
     <Down>             Move selected elements down
    
     <Up>               Move selected elements up
    
     <Right>            Move selected elements right
 Selecting elements:
     <n>                Select next element
    
     <N>                Select previous element
    
     <Tab>              Select next element move mouse
    
     <V>                Select all elements
    
     <v>                Select connected elements
    
     <Escape>           Deselect all elements
 Resizing elements:
     <1>                Make element narrower
    
     <2>                Make element taller
    
     <3>                Make element shorter
    
     <4>                Make element wider
    
     <s>                Shrink box
 Clipboard:
     <y>                Copy to clipboard
    
     <p>                Insert from clipboard
    
     <Y>                Export to clipboard & primary as ascii
    
     <P>                Import from primary to box
    
     <A-P>              Import from primary to text
 <:> command group:
     <q>                Quit
    
     <Q>                Quit no save
    
     <w>                Save
    
     <W>                SaveAs
    
     <e>                Open
    
     <r>                Insert
    
     <m>                Display manpage
    
     <h>                Help
    
     <c>                Display commands
    
     <f>                Display action files
    
     <k>                Display keyboard mapping
 <i> Insert group:
     <A>                Add angled arrow
    
     <a>                Add arrow
    
     <A-a>              Add unicode arrow
    
     <B>                Add shrink box
    
     <b>                Add box
    
     <A-b>              Add unicode box
    
     <C-b>              Add multiple boxes
    
     <c>                Add connector
    
     <E>                Add exec-box no border
    
     <e>                Add exec-box
    
     <f>                Insert from file
    
     <g>                Add group object type 1
    
     <h>                Add help box
    
     <i>                Add if-box
    
     <R>                Add horizontal ruler
    
     <x>                External command output in a box
    
     <X>                External command output in a box no frame
    
     <p>                Add process
    
     <r>                Add vertical ruler
    
     <t>                Add text
    
     <C-t>              Add multiple text
 <a> arrow group:
     <S>                Insert multi-wirl section
    
     <f>                Flip arrow start and end
    
     <d>                Change arrow direction
    
     <s>                Append multi-wirl sectioni
    
     <A-s>              Remove last section from multi-wirl
 <A> align group:
     <t>                Align top
    
     <l>                Align left
    
     <b>                Align bottom
    
     <r>                Align right
    
     <v>                Align vertically
    
     <h>                Align horizontally
 <g> grouping group:
     <g>                Group selected elements
    
     <u>                Ungroup selected elements
    
     <F>                Temporary move selected element to the front
    
     <f>                Move selected elements to the front
    
     <b>                Move selected elements to the back
 <A-g> stripes-group group:
     <1>                Create one stripe group
    
     <g>                Create stripes group
    
     <u>                Ungroup stripes group
 <z> display group:
     <C>                Change grid color
    
     <c>                Change Asciio background color
    
     <g>                Flip grid display
    
     <s>                Flip color scheme
    
     <t>                Flip transparent element background
 <D> debug group:
     <E>                Dump selected elements
    
     <e>                Dump all elements
    
     <S>                Display undo stack statistics
    
     <o>                Test
    
     <s>                Dump self
    
     <t>                Display numbered objects
 <S> slides group:
     <N>                Previous slide
    
     <g>                First slide
    
     <l>                Load slides
    
     <n>                Next slide

Mouse emulation:

     <'>                Toggle> mouse
    
     <Ö>                Mouse shift-left-click
    
     <ö>                Mouse left-click
    
     <ä>                Mouse right-click
    
     <H>                Mouse drag left 3
    
     <J>                Mouse drag down 3
    
     <K>                Mouse drag up 3
    
     <L>                Mouse drag right 3
    
     <Down>             Mouse drag down
    
     <Left>             Mouse drag left
    
     <Right>            Mouse drag right
    
     <Up>               Mouse drag up
    
    
     <A-Down>           Mouse drag down
    
     <A-Left>           Mouse drag left
    
     <A-Right>          Mouse drag right
    
     <A-Up>             Mouse drag up
    
    
     <ö>                Mouse alt-left-click
    
     <ö>                Mouse ctl-left-click

GUI extra bindings

 <C00-a>            Select all elements

 <C00-c>            Copy to clipboard

 <C00-v>            Insert from clipboard

 <C00-e>            Export to clipboard & primary as ascii

 <C0S-V>            Import from primary to box

 <C00-z>            Undo

 <C00-y>            Redo

 <+>                Zoom in

 <->                Zoom out

 <double-click>     Edit selected element

 <C00-button-1>     Add to delection

 <0A0-button-1>     Quick link

 <0AS-button-1>     Duplicate elements

 <CA0-button-1>     Insert flex point

Asciio and Vim

You can call Asciio from vim and insert your diagram.

    map  <leader><leader>a :call TAsciio()<cr>

    function! TAsciio()
        let line = getline('.')

        let tempn = tempname()
        let tempnt = tempn . '.txt'
        let temp = shellescape(tempn)
        let tempt = shellescape(tempnt)

        exec "normal i Asciio_file:" . tempn . "\<Esc>"

        if ! has("gui_running")
        exec "silent !mkdir -p $(dirname " . temp . ")" 
        exec "silent !cp ~/.config/Asciio/templates/empty.asciio ". temp . "; tasciio " . temp . "; asciio_to_text " . temp . " >" . tempt 
        exec "read " . tempnt
        endif

        redraw!
    endfunction

DEPENDENCIES

gnome libraries, gtk, gtk-perl for the gtk version

BUGS AND LIMITATIONS

Please report errors at https://github.com/nkh/P5-App-Asciio/issues.

AUTHORS

        Khemir Nadim ibn Hamouda
        https://github.com/nkh
        CPAN ID: NKH

        Qin Qing
        northisland2017@gmail.com
        unicode support, scroll bar, and rhombus object
 

LICENSE AND COPYRIGHT

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself or GPL3.

Docker Image

There are docker images made by third parties, use a search engine for the latest.

example image: https://gist.github.com/BruceWind/32920cf74ba5b7172b31b06fec38aabb

SEE ALSO

        http://www.jave.de
        http://search.cpan.org/~osfameron/Text-JavE-0.0.2/JavE.pm
        http://ditaa.sourceforge.net/
        http://www.codeproject.com/KB/macros/codeplotter.aspx
        http://search.cpan.org/~jpierce/Text-FIGlet-1.06/FIGlet.pm
        http://www.ascii-art.de (used some entries as base for the network stencil)
        http://www.textfiles.com/art/
        http://www2.b3ta.com/_bunny/texbunny.gif


     *\o_               _o/*
      /  *             *  \
     <\       *\o/*       />
                )
         o/*   / >    *\o
         <\            />
 __o     */\          /\*     o__
 * />                        <\ *
  /\*    __o_       _o__     */\
        * /  *     *  \ *
         <\           />
              *\o/*
 ejm97        __)__