# Telescopo Mermaid Capability Sample This sample reflects the 27 Mermaid diagram types and dedicated ZenUML sequence syntax supported by Telescopo Markdown Studio as verified in September 2026. Mermaid syntax evolves; consult the [official syntax reference](https://mermaid.js.org/intro/syntax-reference.html) for upstream language details. ## Flow and Interaction ### Flowchart ```mermaid flowchart TD A[Start] --> B{Decision} B -->|Yes| C[Action] B -->|No| D[End] C --> D ``` ### Sequence Diagram ```mermaid sequenceDiagram participant Client participant Server participant DB Client->>Server: Request Server->>DB: Query DB-->>Server: Results Server-->>Client: Response ``` ### ZenUML Sequence Diagram ```zenuml Controller.Get(id) { item = Repository.Get(id) if(item) { return item } return null } ``` ### State Diagram ```mermaid stateDiagram-v2 [*] --> Idle Idle --> Loading : fetch Loading --> Success : resolve Loading --> Error : reject Error --> Loading : retry Success --> [*] ``` ### Journey ```mermaid journey title User Onboarding section Sign Up Visit site: 5: User Create account: 3: User section First Use Open app: 4: User Create first document: 5: User ``` ### Timeline ```mermaid timeline title Project History 2024 : Founded : First prototype 2025 : Public beta 2026 : Major release ``` ## Software and Systems ### C4 Context Diagram ```mermaid C4Context title System Context Person(user, "Reader") System(telescopo, "Telescopo", "Markdown studio") Rel(user, telescopo, "Reads and edits Markdown") ``` ### C4 Container Diagram ```mermaid C4Container title Telescopo containers Person(author, "Author") System_Boundary(app, "Telescopo") { Container(editor, "Editor", "SwiftUI", "Edits Markdown") Container(reader, "Reader", "WebKit", "Renders previews") Container(exporter, "Exporter", "PDFKit", "Creates documents") } Rel(author, editor, "Writes") Rel(editor, reader, "Previews") Rel(reader, exporter, "Exports") ``` ### C4 Component Diagram ```mermaid C4Component title Reader components Container_Boundary(reader, "Reader") { Component(parser, "Markdown Parser", "Swift", "Parses source") Component(renderer, "Diagram Renderer", "Mermaid", "Produces SVG") Component(preview, "Preview", "WebKit", "Displays output") } Rel(parser, renderer, "Sends diagram source") Rel(renderer, preview, "Returns SVG") ``` ### C4 Dynamic Diagram ```mermaid C4Dynamic title Open and render a document Person(author, "Author") System(app, "Telescopo") System(renderer, "Mermaid Renderer") Rel(author, app, "1. Opens Markdown") Rel(app, renderer, "2. Sends diagram source") Rel(renderer, app, "3. Returns SVG") Rel(app, author, "4. Displays preview") ``` ### C4 Deployment Diagram ```mermaid C4Deployment title Telescopo desktop deployment Deployment_Node(mac, "User Mac", "macOS") { Container(app, "Telescopo", "Native app", "Reads and edits Markdown") Deployment_Node(webview, "WebKit", "System framework") { Container(renderer, "Mermaid Renderer", "JavaScript", "Creates SVG diagrams") } } Rel(app, renderer, "Renders locally") ``` ### Class Diagram ```mermaid classDiagram class Animal { +String name +makeSound() } class Dog { +fetch() } Animal <|-- Dog ``` ### ER Diagram ```mermaid erDiagram USER ||--o{ POST : writes POST ||--o{ COMMENT : has USER ||--o{ COMMENT : writes ``` ### Requirement ```mermaid requirementDiagram requirement req1 { id: 1 text: System shall be fast risk: low verifymethod: test } element app { type: application } app - satisfies -> req1 ``` ### Git Graph ```mermaid gitGraph commit branch feature checkout feature commit checkout main merge feature commit ``` ## Planning and Strategy ### Gantt Chart ```mermaid gantt title Project Plan dateFormat YYYY-MM-DD section Phase 1 Research :done, a1, 2026-01-01, 14d Development :active, a2, after a1, 21d section Phase 2 Testing :a3, after a2, 14d Launch :a4, after a3, 7d ``` ### Kanban ```mermaid kanban todo[Todo] task1[Plan release] task2[Write documentation] doing[In Progress] task3[Implement feature] done[Done] task4[Design review] ``` ### Event Modeling ```mermaid eventmodeling tf 01 ui CartUI tf 02 cmd AddItem tf 03 evt ItemAdded tf 04 rmo CartItems ``` ### Mindmap ```mermaid mindmap root((Central Topic)) Branch A Detail 1 Detail 2 Branch B Detail 3 Detail 4 ``` ## Data and Analysis ### Pie Chart ```mermaid pie title Distribution "Category A" : 45 "Category B" : 30 "Category C" : 25 ``` ### Donut Chart ```mermaid --- config: pie: donutHole: 0.55 --- pie showData title Distribution "Category A" : 45 "Category B" : 30 "Category C" : 25 ``` ### Quadrant Chart ```mermaid quadrantChart title Priority Matrix x-axis Low Effort --> High Effort y-axis Low Impact --> High Impact quadrant-1 Do First quadrant-2 Schedule quadrant-3 Delegate quadrant-4 Eliminate Task A: [0.2, 0.8] Task B: [0.7, 0.9] Task C: [0.8, 0.3] ``` ## Specialized Diagrams ### Block Diagram ```mermaid block columns 3 Source["Markdown Source"] Preview["Live Preview"] Export["PDF Export"] Source --> Preview Preview --> Export classDef focus fill:#552211,stroke:#ff9933,color:#ffffff class Preview focus ``` ### Ishikawa Diagram ```mermaid ishikawa Slow Publishing Content Missing examples Unclear structure Process Manual review Late feedback Tools Slow export Broken links ``` ### Packet Diagram ```mermaid packet 0-7: "Version" 8-15: "Flags" 16-31: "Payload Length" 32-63: "Document Identifier" 64-95: "Checksum" ``` ### Sankey Diagram ```mermaid sankey Markdown,Reader,55 Markdown,Editor,45 Editor,PDF,30 Editor,HTML,15 Reader,Shared,20 ``` ### Treemap ```mermaid treemap "Telescopo" "Reader": 40 "Studio" "Editor": 25 "Preview": 20 "Export": 15 ``` ### XY Chart ```mermaid xychart title "Documents published" x-axis [Jan, Feb, Mar, Apr] y-axis "Documents" 0 --> 100 line "Actual" [32, 48, 70, 91] bar "Target" [40, 55, 75, 95] ```