Skip to content

Wide mermaid diagrams are too short #479

Description

@kenmueller

Bug Description

Wide mermaid diagrams render too short, causing the text to be very small

Image

Sup AI chat link where the screenshot above is taken: https://sup.ai/chats/ed904061-2e5b-47ca-a36f-28d00acc0bfe

Steps to Reproduce

Normal streamdown with wide mermaid code block

\`\`\`mermaid\nflowchart TD\n    classDef hypo    fill:#6A0DAD,color:#fff,stroke:#4a0080,stroke-width:3px,font-weight:bold\n    classDef ant     fill:#1565C0,color:#fff,stroke:#0D47A1,stroke-width:3px,font-weight:bold\n    classDef post    fill:#BF360C,color:#fff,stroke:#7f2000,stroke-width:3px,font-weight:bold\n    classDef antH    fill:#90CAF9,color:#0D1B2A,stroke:#1565C0,stroke-width:1.5px,font-weight:bold\n    classDef postH   fill:#FFAB91,color:#1a0000,stroke:#BF360C,stroke-width:1.5px,font-weight:bold\n    classDef target  fill:#E8F5E9,color:#1B5E20,stroke:#2E7D32,stroke-width:1.5px\n\n    HYP([\"HYPOTHALAMUS<br/>Master Neuroendocrine Regulator\"]):::hypo\n\n    HYP -->|\"Portal Blood System<br/>Releasing & Inhibiting<br/>Hormones\"| ANT\n\n    HYP -.->|\"Direct Neural Axons<br/>Supraoptic & Para-<br/>ventricular Nuclei\"| POST\n\n    subgraph ANTERIOR_LOBE[\"ANTERIOR PITUITARY (Adenohypophysis)\"]\n        ANT([\"ANTERIOR PITUITARY<br/>Tissue: Glandular Epithelium<br/>Origin: Rathke's Pouch<br/>SYNTHESIZES its own hormones\"]):::ant\n\n        GH([\"GH<br/>Growth Hormone\"]):::antH\n        TSH([\"TSH<br/>Thyroid-Stimulating Hormone\"]):::antH\n        ACTH([\"ACTH<br/>Adrenocorticotropic Hormone\"]):::antH\n        FSH([\"FSH<br/>Follicle-Stimulating Hormone\"]):::antH\n        LH([\"LH<br/>Luteinizing Hormone\"]):::antH\n        PRL([\"Prolactin<br/>PRL\"]):::antH\n    end\n\n    subgraph POSTERIOR_LOBE[\"POSTERIOR PITUITARY (Neurohypophysis)\"]\n        POST([\"POSTERIOR PITUITARY<br/>Tissue: Neural / Glial Pituicytes<br/>Origin: Downgrowth of Hypothalamus<br/>STORES & RELEASES only<br/>hormones made in hypothalamus\"]):::post\n\n        ADH([\"ADH / Vasopressin<br/>Antidiuretic Hormone\"]):::postH\n        OXY([\"Oxytocin<br/>OXT\"]):::postH\n    end\n\n    ANT --> GH & TSH & ACTH & FSH & LH & PRL\n    POST --> ADH & OXY\n\n    GH    --> TGH([\"Bones, Muscles, Liver<br/>Stimulates growth & IGF-1\"]):::target\n    TSH   --> TTSH([\"Thyroid Gland<br/>Releases T3 & T4, regulates metabolism\"]):::target\n    ACTH  --> TACTH([\"Adrenal Cortex<br/>Releases cortisol, stress response\"]):::target\n    FSH   --> TFSH([\"Gonads<br/>Follicle maturation / Spermatogenesis\"]):::target\n    LH    --> TLH([\"Gonads<br/>Ovulation / Testosterone production\"]):::target\n    PRL   --> TPRL([\"Mammary Glands<br/>Milk synthesis & secretion\"]):::target\n    ADH   --> TADH([\"Kidneys & Blood Vessels<br/>Water reabsorption, vasoconstriction\"]):::target\n    OXY   --> TOXY([\"Uterus & Mammary Glands<br/>Contractions, milk ejection, bonding\"]):::target\n\`\`\`

Expected Behavior

Text is a bit larger

Actual Behavior

Text is very small

Code Sample

Streamdown Version

2.5.0

React Version

19.2.4

Node.js Version

14.14.1

Browser(s)

Chrome

Operating System

macOS

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions