| | @@ -0,0 +1,87 @@ |
| 1 | +# The Pikchr Diagram Language
|
| 2 | +
|
| 3 | +Pikchr (pronounced "picture") is a [PIC][1]-like markup language for creating
|
| 4 | +diagrams in technical documentation. Pikchr diagrams source texte text for Pikchr diagrams
|
| 5 | +can be embedded directly in either [Markdown][2] or [Fossil Wiki][3].
|
| 6 | +Fossil translates the Pikchr source text into SVG which is displayed as
|
| 7 | +part of the rendered wiki.
|
| 8 | +
|
| 9 | +[1]: wikipedia:/wiki/Pic_language
|
| 10 | +[2]: /md_rules
|
| 11 | +[3]: /wiki_rules
|
| 12 | +
|
| 13 | +For example, this document is written in Markdown. The following
|
| 14 | +is a sample Pikchr diagram:
|
| 15 | +
|
| 16 | +``` pikchr
|
| 17 | +arrow right 200% "Markdown" "Source"
|
| 18 | +box rad 10px "Markdown" "Formatter" "(markdown.c)" fit
|
| 19 | +arrow right 200% "HTML+SVG" "Output"
|
| 20 | +arrow <-> down 70% from last box.s
|
| 21 | +box same "Pikchr" "Formatter" "(pikchr.c)" fit
|
| 22 | +```
|
| 23 | +
|
| 24 | +The diagram above was ``` pikchr
|
| 25 | + matter" "(markdownMarkdown" "Source"
|
| 26 | + ram:
|
| 27 | +
|
| 28 | +``` pikchr
|
| 29 | +arrow right matter" "( t 200% "HTML+SVG" "Output"
|
| 30 | +arrow <- HTML+SVG" "Output"
|
| 31 | +a ormatter" "(pikchr.c)" fit
|
| 32 | +```
|
| 33 | +~~~~~
|
| 34 | +
|
| 35 | +See the [original Markdown source text of this document][4] for an
|
| 36 | +example of Pikchr in operation.
|
| 37 | +
|
| 38 | +[4]: ./pikchr.md?mimetype=text/plain
|
| 39 | +
|
| 40 | +Fossil allows Pikchr diagrams to appear anywhere that Markdown or
|
| 41 | +Fossil Wiki markup or used, including:
|
| 42 | +
|
| 43 | + * [Embedded documentation](./embeddeddoc.wiki)
|
| 44 | + * Stand-alone wiki pages
|
| 45 | + * [Wiki pages associated with particular branches or check-ins](./wikitheory.wiki#assocwiki)
|
| 46 | + * Check-in comments
|
| 47 | + * [Technical notes](./event.wiki)
|
| 48 | + * [Forum posts](./forum.wiki)
|
| 49 | + * [Bug reports and trouble tickets](./bugtheory.wiki)
|
| 50 | +
|
| 51 | +## Pikchr Is A Separate Project
|
| 52 | +
|
| 53 | +Even though the original author of Pikchr is the same as the original
|
| 54 | +creator of Fossil, the sources to the Pikchr formatter are maintained
|
| 55 | +as a [separate project named "pikchr.org"](https://pikchr.org).
|
| 56 | +Pikchr is a delivvered as a single file of C code. The "pikchr.c" file
|
| 57 | +from the Pikchr project is periodically copied into the Fossil source
|
| 58 | +tree. Pikchr is maintained as a project distinct from Fossil so that it
|
| 59 | +can be used independently of Fossil.
|
| 60 | +
|
| 61 | +### Pikchr User Manual And Tutorials
|
| 62 | +
|
| 63 | +Complete documentation on the Pikchr language can be found on the
|
| 64 | +Pikchr project page:
|
| 65 | +
|
| 66 | + * <https://pikchr.org/>
|
| 67 | +
|
| 68 | +That website contains a user manual, tutorials, a language specification,
|
| 69 | +a summary of differences between Pikchr and legacy PIC,
|
| 70 | +and it hosts copies of historical PIC documentation.
|
| 71 | +
|
| 72 | +## How To Include Pikchr Diagrams In Fossil Documents
|
| 73 | +
|
| 74 | +To illustrate how to include Pikchr in Fossil markup, we will use the
|
| 75 | +following one-line Pikchr. Click to see the code:
|
| 76 | +
|
| 77 | +~~~ pikchr toggle
|
| 78 | +arrow; box "Hello" "World!" fit; arrow
|
| 79 | +~~~
|
| 80 | +
|
| 81 | +For Markdown, the Pikchr code is put inside of a
|
| 82 | +[fenced code block][fcb]. A fenced code block is the text in between
|
| 83 | +``` ... ``` or between
|
| 84 | +~~~ ... ~~~ using three or
|
| 85 | +more ` or ~ characters. The fenced code block normally
|
| 86 | +displays its content verbatim, but if an "info string" of "pikchr"
|
| 87 | +follows the opening ``` or ~~~ |