pikchr

This is extenstion helper for debaging pikchr diagrams.

Render server. You can use a shared server for rendering (set by default in settings in the vscode-extention https://pikchr-render-server.herokuapp.com/) or deploy your server and set value of server url to pikchr.render_server in your settings.json.

Redner server API docs

If you have questions, comments, or suggestions, please visit the GitHub Discussion board.

What is pikchr?

Pikchr (pronounced "picture") is a PIC-like markup language for diagrams in technical documentation. Pikchr is designed to be embedded in fenced code blocks of Markdown or similar mechanisms of other documentation markup languages.

For example, the diagram:

Link to orig SVG

Is generated by 7 lines of Markdown:

arrow right 200% "Markdown" "Source"
box rad 10px "Markdown" "Formatter" "(markdown.c)" fit
arrow right 200% "HTML+SVG" "Output"
arrow <-> down 70% from last box.s
box same "Pikchr" "Formatter" "(pikchr.c)" fit

More deatils on the official website

How use?

• select in your active editor the source code of the diagram
• in context menu click to Preview pikchr diagrаms
• if selected code is valid will be opened split panel with diagram
• if selected code is invalid - you will be notified about it