Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Mermaid zoom-in/zoom-out button?

Open
  • Is something wrong?
#292 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
62/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
react, typescript
Domain
frontend

Research direction

Start by locating how Mermaid diagrams are rendered in the React markdown preview and review any existing preview controls. Add discoverable zoom-in and zoom-out controls for long Mermaid diagrams, then verify the behavior with the example diagram in this issue and confirm the controls work without disrupting normal preview rendering.

Written by the indexing model from the issue text.

Description

Currently, I have a long mermaid which doesn't read well unless you use zoom-in/zoom-out.

For example,

Mermaid Diagram

flowchart TD
    A["Leaked X DM offer<br/>simple influencer pitch"] -->|"turns DMs into paid distribution"| B["Geo-arbitrage pricing<br/>localized rate, global reach"]
    B -->|"lowers CAC through PPP leverage"| C["Influencer army<br/>12 quote-tweets per month"]
    C -->|"repeats the same platform signal"| D["Manufactured network effect<br/>trend appearance and social proof"]
    D -->|"converts trust into gambling users"| E["Gambling economics<br/>LTV must beat tweet cost"]
    E -->|"keeps the acquisition loop profitable"| F["Growth loop<br/>DMs keep coming"]

    A1["Can pay u $1,000 a month"] --> A
    A2["Ask: 12 quote-tweets"] --> A
    A3["Leaked messages reveal strategy"] --> A
    A4["Kalshi slides into X DMs"] --> A

    B1["Roughly $83 per tweet"] --> B
    B2["Purchasing Power Parity (PPP)"] --> B
    B3["Dollar strong in targeted demographics"] --> B
    B4["X timeline has global reach"] --> B
    B5["Localized rate for global asset"] --> B
    B6["Lower Customer Acquisition Cost (CAC) drastically"] --> B

    C1["Universal army of promoters"] --> C
    C2["Steep discount"] --> C
    C3["Badges next to blue tick"] --> C
    C4["Tech influencer in developing nation"] --> C
    C5["Significant salary, often more than rent money"] --> C

    D1["Monday: coding tips"] --> D
    D2["Tuesday: generational wealth on prediction markets"] --> D
    D3["Influencers secure the bag"] --> D
    D4["Platforms buy trust at scale"] --> D
    D5["Amrit promotes Kalshi"] --> D
    D6["Aditya promotes Kalshi"] --> D
    D7["Algorithm sees a trend"] --> D
    D8["User sees social proof"] --> D
    D9["Reality: bought on a payroll"] --> D

    E1["Product is gambling"] --> E
    E2["Gambling is a universal human behavior"] --> E
    E3["Desire to wager on outcomes"] --> E
    E4["LTV exceeds $83 tweet cost"] --> E
    E5["Math holds up"] --> E

    F -.->|"profitable tweets fund more DMs"| A
    D -.->|"more posts create more social proof"| C
    C -.->|"repeated virality attracts platform growth"| F

So I'd love controls like you see on Github Preview or maybe just zoom-in/zoom-out.

Dominant language
TypeScript
Stars
350
Forks
54
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from uiwjs/react-markdown-preview

All issues in uiwjs/react-markdown-preview

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.