Native Pikchr Diagram Support in MermaidJS

[fugohan]

Proposal

This feature proposes integrating Pikchr’s vector diagramming capabilities into MermaidJS as a first-class diagram type. Pikchr’s PIC-like syntax would be supported via WebAssembly (WASM) compilation of its C core, enabling client-side rendering of technical illustrations alongside Mermaid’s existing chart types.

The Obsidian community’s successful integration via the Adamantine Pick plugin (Emscripten-compiled Pikchr core) demonstrates technical feasibility.

Use Cases

1. Technical Documentation

Pikchr excels at creating precise schematics for APIs, network topologies, or hardware designs. Example:

box "API Gateway" fit  
arrow -> queue "Message Broker"  
queue -> database "Redis" as Redis  
Redis.linecolor = red  

This allows version-controlled infrastructure diagrams that update alongside codebases.

2. Academic Publishing

Researchers can embed LaTeX-quality vector diagrams directly in markdown papers:

box "Sample" "Chamber"  
cylinder "Detector" with .n at bottom of previous  
arrow from last box.s down 50% then right 200% to "DAQ System" 

Eliminates manual image exports while maintaining publication-ready precision.

Screenshots

No response

Syntax

pikchr  
box "Load Balancer"  
arrow -> server1: HTTP  
arrow -> server2: HTTP  

Implementation

This is a proposal which I'd love to see built into mermaid by the wonderful community.

[sidharthv96]

I think this would be a good candidate for an external diagram, like ZenUML.