picjs

pic Draw diagrams using plain-text descriptions. Embed drawing in (for example) Markdown.

A bit like Mermaid, but:

• no specific drawing types
• dependable, consistent layout controls based on constraints
• variables, loops, and color support

• Playground
• Guide
• Reference

Extras

• Syntax highlighting support (currently vim and VSC) under editor-support/
• SKILL.md lets agents create diagrams
• CLI for local processing
• GitHub action for formatting README.md on push

Examples

(click to open in playground)

| | | | |--|--|--| | | | |

CLI

• Give it a picjs file on stdin, or pass it the name of a file ending .picjs and it writes the generated SVG to stdout.

• Pass it a Markdown file and it will process ```` picjs blocks. An SVG will be generated in a subdirectory (_diagrams by default) and the Markdown will embed that image. The original picjs markup is left in the file, but placed into an HTML comment. The CLI tool will also process pictures in these comments, so you can edit your diagram, rerun picjs and it will update the SVG.

For The Impatient

1. Load the library

<script src="https://cdn.jsdelivr.net/npm/@strike48/picjs@latest/dist/picjs.umd.js"></script>

2. Format picjs code blocks in the page.

<script>
  picjs.processCodeBlocks();
</</script>

3. Make pretty pictures.

<pre><code class="language-picjs">
box "Hello"
arrow
box "World"
</code></pre>

With Thanks

To Brian Kernighan and the folks at Bell Labs who wrote the amazing Designers Work Bench over fifty years ago. They changed the way we write documents profoundly.

And to D. Richard Hipp, who created both SQLite and pikchr, the pic clone on which this was based.

Copyright and License

Copyright 2026 Devo, Inc

Licensed under the Mozilla Public License