DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:a2s

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
plugin:a2s [2017-10-23 03:04] – possibility to add links to shapes schplurtzplugin:a2s [2023-04-10 17:21] (current) – compatible with jack jackrum (tested) schplurtz
Line 1: Line 1:
-====== a2s Plugin ======+====== A2S Plugin ======
  
 ---- plugin ---- ---- plugin ----
-description: Convert ASCII art to nice embedded SVG images+description: Convert ASCII art diagram to nice embedded SVG images.
 author     : Schplurtz le Déboulonné author     : Schplurtz le Déboulonné
 email      : Schplurtz@laposte.net email      : Schplurtz@laposte.net
 type       : syntax type       : syntax
-lastupdate : 2017-08-05 +lastupdate : 2022-06-21 
-compatible : elenor of tsort, detritus, frusterick manners+compatible : elenor of tsort, detritus, frusterick manners, greebo, hogfather, igor, jack jackrum
 depends    :  depends    : 
 conflicts  conflicts 
Line 19: Line 19:
 screenshot_img : http://imageshack.com/a/img923/6940/SjSOjj.png screenshot_img : http://imageshack.com/a/img923/6940/SjSOjj.png
 ---- ----
- 
  
 a2s is a little plugin that turns ASCII art boxes, lines and arrows into nice SVG images. It is based on [[https://github.com/dhobsd/asciitosvg|ASCIIToSVG]] by [[https://github.com/dhobsd|Devon H. O'Dell]]. It is very similar to the [[doku>plugin:ditaa|ditaa]] plugin but does not require external programs to run. It is compatible with the ODT export plugin. a2s is a little plugin that turns ASCII art boxes, lines and arrows into nice SVG images. It is based on [[https://github.com/dhobsd/asciitosvg|ASCIIToSVG]] by [[https://github.com/dhobsd|Devon H. O'Dell]]. It is very similar to the [[doku>plugin:ditaa|ditaa]] plugin but does not require external programs to run. It is compatible with the ODT export plugin.
  
 +-----------
 +
 +june 2022: a2s works well with DW igor RC2 and php 8.1. But exports to odt with the [[plugin:odt|odt]] plugin currently fails. There is no problem with php 7.4. See this [[https://github.com/schplurtz/a2s/issues/13|bug report]]. 
 ===== Installation ===== ===== Installation =====
  
-Install the plugin using the [[doku>plugin:plugin|Plugin Manager]]. It will install the latest version of the plugin. Refer to [[doku>:Plugins]] on how to install plugins manually.+Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.
  
 ===== Examples/Usage ===== ===== Examples/Usage =====
Line 107: Line 109:
 "a2s:type":"storage" "a2s:type":"storage"
 </code> </code>
-  * link : ''"a2s:link":"//linktext//"'' where //linktext// is either an internal wiki link, or a classic //%%protocol://server/resource%%// link. [[doku>interwiki|interwiki links]] cannot yet be used. Since SVG can be included in ODT file, a2s does not obey the [[doku>config:canonical|canonical]] setting and always generate absolute links.\\ Examples:<code>+  * link : ''"a2s:link":"//linktext//"'' where //linktext// is either an internal wiki link, an [[doku>interwiki|interwiki link]], or a classic //%%protocol://server/resource%%// link. Since SVG can be included in ODT and PDF file, a2s does not obey the [[doku>config:canonical|canonical]] setting and always generate absolute links. Since neither libreoffice nor [[doku>plugin:dw2pdf|dw2pdf]] use this link, this seems rather useless and may change in the future.\\ Examples:<code>
 "a2s:link":"[[.:]]" "a2s:link":"[[.:]]"
 "a2s:link":"[[:start]]" "a2s:link":"[[:start]]"
 "a2s:link":"[[:start|The start page]]" "a2s:link":"[[:start|The start page]]"
 +"a2s:link":"[[doku>interwiki|interwiki link]]
 "a2s:link":"https://github.com/schplurtz/a2s" "a2s:link":"https://github.com/schplurtz/a2s"
 "a2s:link":"ftp://ftp.debian.org/debian/README" "a2s:link":"ftp://ftp.debian.org/debian/README"
Line 116: Line 119:
   * identifier removal. By default the id is left in the image. This is useful when you have enough room to use a meaningful word as id. However, it is possible to remove it using this code <code>"a2s:delref":true</code>   * identifier removal. By default the id is left in the image. This is useful when you have enough room to use a meaningful word as id. However, it is possible to remove it using this code <code>"a2s:delref":true</code>
  
-here is a full example :+here is a full example example :
 <code>[0]: {"fill":"#d48","stroke":"#F50078","stroke-dasharray":"5 5","stroke-width":4,"a2s:type":"cloud","a2s:delref":true,"a2s:link":"https://github.com/schplurtz/a2s"}</code> <code>[0]: {"fill":"#d48","stroke":"#F50078","stroke-dasharray":"5 5","stroke-width":4,"a2s:type":"cloud","a2s:delref":true,"a2s:link":"https://github.com/schplurtz/a2s"}</code>
  
 ==== Alignment ==== ==== Alignment ====
 +
 +Just like with regular images, you can align your SVG graphics by inserting spaces after ''<'' and before ''>''. If there are more spaces on the left of the word ''a2s'', then the image is right-aligned, if there are more spaces on the right, the image is left-aligned. When there is the same number of spaces on both sides of ''a2s'', the image is centered
  
 {{http://imageshack.com/a/img922/5228/MfGXsO.png}} {{http://imageshack.com/a/img922/5228/MfGXsO.png}}
Line 203: Line 208:
 {{http://imageshack.com/a/img923/548/jHS4IU.png}} {{http://imageshack.com/a/img923/548/jHS4IU.png}}
 <code txt shapes> <code txt shapes>
 +<a2s>
 +Shapes :
 +.----------.     .----------.     .----------.
 +|[cloud]       |[computer]|     |[diamond] |
 +|          |  +->         |<-o->         |
 +|          |  |  |          |  |  |          |
 +.----------.  |  .----------.  |  .----------.
 +--------------o----------------+
 +.----------.  |  .----------.  |  .----------.
 +|[document]|  :  |[storage] |  |  |[printer] |
 +|          |<-+->         |  |  | Some txt |
 +|          |              |<-+->         |
 +.----------.     .----------.     '----------'
 +
 +.----------.     .----------.     .----------.
 +|[cl]      |     |[c]           |[yn]      |
 +|          |  +->         |<-o->         |
 +|          |  |  |          |  |  |          |
 +.----------.  |  .----------.  |  .----------.
 +--------------o----------------+
 +.----------.  |  .----------.  |  .----------.
 +|[d]        :  |[st]      |  |  |[p]       |
 +|          |<-+->         |  |  | Some txt |
 +|          |              |<-+->         |
 +.----------.     .----------.     '----------'
 +
 +
 +[printer]:  {"a2s:type":"printer","fill":"#ff1493"}
 +[computer]: {"a2s:type":"computer"}
 +[cloud]:    {"a2s:type":"cloud"}
 +[diamond]:  {"a2s:type":"diamond"}
 +[document]: {"a2s:type":"document"}
 +[storage]:  {"a2s:type":"storage"}
 +[p]:        {"a2s:type":"printer","fill":"#ff1493","a2s:delref":true}
 +[c]:        {"a2s:type":"computer","a2s:delref":true}
 +[cl]:       {"a2s:type":"cloud","a2s:delref":true}
 +[yn]:       {"a2s:type":"diamond","a2s:delref":true}
 +[d]:        {"a2s:type":"document","a2s:delref":true}
 +[st]:       {"a2s:type":"storage","a2s:delref":true}
 +</a2s>
 +</code>
 +
 +
 +===== shapes inside shapes and custom styles =====
 +
 +Transparency is obtained by using an invalid colorname.
 +This is undocumented. This may change depending on the browser
 +or rendering library.
 +
 {{http://imageshack.com/a/img922/5582/l6VrcE.png}} {{http://imageshack.com/a/img922/5582/l6VrcE.png}}
 <code> <code>
-<a2s><a2s>+<a2s>
 .---------------------------.   .----------. .---------------------------.   .----------.
 |[storage]                  |   |[document]| |[storage]                  |   |[document]|
Line 252: Line 306:
 :!: No. As of 2017/07/27, unless you are the a developer of dw2pdf or mpdf, its PDF library, there is nothing to do. Sorry. :!: No. As of 2017/07/27, unless you are the a developer of dw2pdf or mpdf, its PDF library, there is nothing to do. Sorry.
  
 +:?: Is it possible to alter the line color using css or a configuration value? under the bootstrap / bootswatch / cyborg theme which is dark the lines are black on a black background. 
 +For now I've just worked around it using the following in a less css file to alter the background color 
 +<code> 
 +&.cyborg { 
 +  svg.a2s { 
 +    background-color:#303030; 
 +  } 
 +
 +</code>
plugin/a2s.1508720661.txt.gz · Last modified: 2017-10-23 03:04 by schplurtz

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki