Mermaid mindmaps as text trees

Pass mindmap source to renderGlyphDiagram. Indentation defines parentage; the adapter creates a left-to-right tree.

Plan a release

                                         ╭───────────────╮        
                                      ┌──│ Card payments │        
                         ╭──────────╮ │  ╰───────────────╯        
                      ┌──│ Checkout ├─┤                           
                      │  ╰──────────╯ │  ╭────────────────╮       
                      │               └──│ Order receipts │       
                      │                  ╰────────────────╯       
                      │                                           
                      │                   ╭─────────╮             
                      │                ┌──│ Backups │             
       ╭────────────╮ │ ╭────────────╮ │  ╰─────────╯             
       │ Release v2 ├─┼─│ Operations ├─┤                          
       ╰────────────╯ │ ╰────────────╯ │  ╭──────────────╮        
                      │                └──│ Error alerts │        
                      │                   ╰──────────────╯        
                      │                                           
                      │                   ╭───────────────╮       
                      │               ┌───│ Staff preview │       
                      │   ╭─────────╮ │   ╰───────────────╯       
                      └───│ Rollout ├─┤                           
                          ╰─────────╯ │   ╭───────────────╮       
                                      └───│ Public launch │       
                                          ╰───────────────╯       

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
mindmap
 root(Release v2)
  Checkout
   Card payments
   Order receipts
  Operations
   Backups
   Error alerts
  Rollout
   Staff preview
   Public launch
`, {
  target: "chat",
  width: 66,
  height: 26,
  overflow: "expand"
});
console.log(text);

Choose node outlines

                             ╭◠◠◠◠◠◠◠◠◠◠◠◠◠◠◠◠╮                 
                           ┌─│ Cloud services │                 
                           │ ╰◡◡◡◡◡◡◡◡◡◡◡◡◡◡◡◡╯                 
                           │                                    
                ╭────────╮ │ *╱╲╱╲╱╲╱╲*                         
                │ Portal ├─┼─│ Alerts │                         
                ╰────────╯ │ *╲╱╲╱╲╱╲╱*                         
                           │                                    
                           │ ╱──────────╲                       
                           └─❬ Security ❭                       
                             ╲──────────╱                       

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
mindmap
 root(Portal)
  )Cloud services(
  ))Alerts((
  {{Security}}
`, {
  target: "chat",
  width: 64,
  height: 16,
  overflow: "expand"
});
console.log(text);

Syntax and limits

• Rounded nodes are the default. Circle, cloud, bang, and hexagon delimiters select outlines.
• Repeated labels are separate tree nodes. Uneven dedents and apostrophes are accepted.
• Icons, classes, and configuration are inert. Markdown labels become plain text and the adaptation is reported.
• Deep trees may become wide. Use autoDirection, more columns, or pagination rather than shrinking the font.