frankenmermaid standalone showcase

Mermaid compatibility, but with a stricter architecture and a wider surface area.

This single HTML file works from file://, loads browser libraries from CDNs, and attempts to boot the frankenmermaid WASM runtime from GitHub-backed URLs. It demonstrates the actual browser API contract that exists in the repo today: init, renderSvg, detectType, parse, sourceSpans, capabilityMatrix, and the canvas-backed Diagram class.

11
Implemented capability claims
22
Partial claims
1
Experimental runtime claim
7
Browser-side API entry points

Presenter mode

Guided live storytelling without manual state surgery

Presenter mode is idle. Start the guided tour to step through the strongest runtime, resilience, and evidence moments in sequence.
Reset restores the pre-tour showcase state so ad hoc exploration and scripted presentation can share one page safely.
Current step
Idle

Live runtime status

GitHub-backed WASM bootstrap

Checking GitHub-backed frankenmermaid runtime endpoints...
Primary source
Pending
unresolved
Why this matters

The page is intentionally honest. If GitHub does not actually host the generated JS glue and WASM binary, it shows the precise failure instead of pretending the web surface is published.

Endpoint diagnostics
GitHub-backed URLs only

What is different from Mermaid?

The project is not trying to be a browser-only clone.

Shared IR pipeline

Frankenmermaid runs parse → deterministic layout → renderer surfaces from one Rust-first pipeline, instead of a browser-first engine with secondary integrations.

Source spans and diagnostics

The WASM surface includes sourceSpans() and structured parse results, making editor tooling and click-to-source workflows possible without scraping rendered output.

Capability metadata is explicit

Support is tracked with a capability matrix instead of vague blanket claims. Flowcharts are marked implemented; many diagram families are currently partial by design and are labeled that way here.

Multi-surface output

The same engine targets CLI, SVG, terminal, canvas, and WASM. Mermaid mostly stops at browser rendering; frankenmermaid is being built as a shared rendering core.

Showcase atlas

Big, realistic diagrams first. Everything else is secondary.

This section leads with large live renders from the frankenmermaid browser runtime. It spotlights one serious sample from every major diagram family so the page proves visual output immediately instead of burying it under tooling panels.

Corpus
80
Families
10
Mode
Live

Loading spotlight…

pending category

Why this sample matters
Spotlight source

                

              

            


            

              

                

                  

                    
Featured families

                    
One strong sample per category

                  

                  
click to swap spotlight

                

                

              


              

                
What this proves

                

                  
The browser package is a real GitHub-hosted WASM runtime, not a mock surface.

                  
The examples are realistic workflows in ops, product, finance, healthcare, identity, and delivery systems.

                  
The atlas below shows breadth; the spotlight here makes render quality legible at a serious size.

                

              

            

          

        


        

        

          

            

              
Live playground

              
One editor, two engines, six API surfaces

              

                Select a sample, then inspect type detection, parse output, source spans, the capability matrix, SVG output, and the canvas surface. Mermaid
                is rendered on the right as a baseline comparison.
              

            

            

              

              

                
                
                
                
                
              

            

          


          

            

              

                

                  

                    

                      
                      pending
                    

                    

                      Loading editor metadata…
                    

                  

                  

                    

                      
                      
                    

                    
                  

                

                

                  

                    
                    

                      
                      
                    

                  

                  

                    

                      
Syntax lens

                      

                    

                    

                      
Productivity affordances

                      

                      

                        Ctrl+EnterRender current source
                        Alt+←Previous featured sample
                        Alt+→Next featured sample
                      

                    

                  

                


                

                  

                    

                      
Theme and style studio

                      
Preset-backed styling controls for the FrankenMermaid runtime, with reset semantics and URL-safe state.

                    

                    
                  

                  

                    

                      
                      
                    

                    

                      
                      
                    

                    

                      
                      
                    

                    

                      
                      
                    

                  

                  

                    
                    
                  

                  
Preset-backed style state pending.

                  

                

              


              

                

                  
detectType()

                  

                

                

                  
sourceSpans()

                  

                

              


              

                

                  
parse()

                  
Pending

                

                

              


              

                

                  

                    
stageTelemetryPanel()

                    
Stage timings, counts, and degradation posture for the committed revision, with a raw JSON view for machine-readable inspection.

                  

                  
No telemetry committed yet

                

                

                

                

                
Telemetry JSON will appear after the next committed render.

              


              

                

                  

                    
diagnostics()

                    
Inline recovery guidance, confidence context, and span-driven markers for the current source.

                  

                  
No diagnostics yet

                

                

                

              

            


            

              

                

                  

                    

                      
frankenmermaid renderSvg()

                      
Deterministic SVG from the Rust pipeline at a readable size

                    

                    

                      pending
                    

                  

                  

                


                

                  

                    

                      
Mermaid baseline

                      
Reference browser renderer from CDN for the same source

                    

                    

                      ready
                    

                  

                  

                

              


              

                

                  

                    

                      
Diagram(canvas).render()

                      
Canvas-backed browser surface

                    

                    

                      pending
                    

                  

                  

                    
                  

                


                

                  
capabilityMatrix()

                  

                  

                  

                


                

                  

                    

                      
exportArtifactLab()

                      
Waiting for a committed render before building export artifacts.

                    

                    
state-traceable outputs

                  

                  

                    
                    
                    
                    
                  

                  

                  

                


                

                  

                    

                      
determinismCheck()

                      
Run the checker to repeat the current FrankenMermaid render path and compare normalized output hashes.

                    

                    

                      
                      
                    

                  

                  

                  

                  

                  
Determinism evidence JSON will appear here after the checker runs.

                


                

                  

                    

                      
safeFallbackPreview()

                      
Waiting for the first healthy render snapshot.

                    

                    

                      pending
                    

                    

                    

                


                

                  

                    

                      
layoutCycleLab()

                      
Read-only runtime inspection of algorithm dispatch, cycle handling, crossings, and routing pressure for the current revision.

                    

                    
analysis controls only

                  

                  

                    
                    
                    
                    
                    
                  

                  
Waiting for runtime layout data.

                  

                  

                  

                    This lab changes the inspection lens only. The current browser runtime still chooses the algorithm and cycle strategy internally.
                  

                

              

            

          

        


        

          

            

              
Support and evidence

              
Support truth, matrix coverage, and project reading guidance

              

                This section is the due-diligence rail for the showcase: capability truth, scenario coverage, and reading guidance should stay reviewable without displacing the primary visual story above.
              

            

            

              
              
              
            

          


          

          

            
Support reality

            
Current diagram support from the checked-in capability artifact

            

            

              
Capability-to-scenario matrix

              

                This coverage artifact maps the demo’s promised feature families to concrete scenario IDs already present in the repo.
              

              

              

            

          


          

            
Render notes

            
How to read the current state of the project

            

              

                
1. Flowcharts are the current strongest visual proof

                

                  They are the only family marked fully implemented in the capability matrix, so they are the clearest way to judge the renderer today.
                

              

              

                
2. Partial families are still worth showing

                

                  Sequence, class, state, ER, gantt, and journey are intentionally visible here because the point of the showcase is to reveal current quality, not hide it.
                

              

              

                
3. The lower editor is for inspection, not first impressions

                

                  The gallery above is now the primary product surface. The editor below exists so you can inspect parse output, spans, canvas behavior, and Mermaid comparisons after you have already seen the renders at full size.