github-starred/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-09 04:25:18 -05:00
Code Issues 2.6k Packages Projects Releases 100 Wiki Activity

Zoom function for mermaid #11192

New Issue
Open
opened 2025-11-02 09:30:23 -06:00 by GiteaMirror · 6 comments
GiteaMirror commented 2025-11-02 09:30:23 -06:00
Owner
Copy Link

Originally created by @FrostKiwi on GitHub (Jul 10, 2023).

Feature Description

Colleagues and me are a fan of the inclusion of mermaid and the ability to express entity relationship diagrams in plain English.
Github provides the ability zoom the resulting diagrams, whilst Gitea does not. Though you can use the browser native touch-zoom to view zoom the diagrams, on a classical PC without touchpad there is no way in Gitea to increase the size of the diagram, since it doesn't scale beyond the screen width when using standard page zoom. Rather frustrating when viewing bigger diagrams.

Zooming was supposed to be a feature to be included in mermaid itself, but it doesn't seem it will be included in mermaid-js itself, at least as far as I searched the issue tracker of mermaid-js. There are workarounds and CSS tweaks to allow zooming with standard page zoom or even proper zoom gizmo implementations: https://github.com/mermaid-js/mermaid/issues/1860

It would be excellent if there was any kind of way to realize this. Either through one of the workarounds suggested in the mermaid repo or in a more official capacity. Also I had to tweak the max chars allowed in the mermaid config, since our multi-language usage of it instantly blew past all defaults set by Gitea.

Here is a sample Diagram we use. Contents replaced with garbage from ChatGPT.

erDiagram
    "梅 | Plume" zero or many -- zero or one "苹果 | Apple" : "使用 | used"
    "梅 | Plume" one -- zero or many "香蕉 | Banana" : "使用 | used"

    "梅 | Plume" one -- zero or many "葡萄 | Grapes" : "使用 | used"
    "西瓜 | Watermelon" zero or many -- one "梅 | Plume" : "达成 | attains"
    "なんちゃらかんちゃら | OrangeAndLemon" one or many -- zero or many "梅 | Plume" : "使用 | used"
    "樱桃 | Cherry" zero or many -- one "梅 | Plume" : "达成 | attains"

    "梅 | Plume" one -- zero or many "菠萝 | Pineapple" : "执行 | performed"
    "梅 | Plume" one -- zero or many "猕猴桃 | Kiwi" : "执行 | performed"
    "梅 | Plume" one -- zero or many "草莓 | Strawberry" : "执行 | performed"

    "蓝莓 | Blueberry" one -- zero or many "木瓜 | Papaya" : "制造 | Extracts"
    "蓝莓 | Blueberry" one -- zero or many "橙子 | Orange" : "制造 | Extracts"

    "木瓜 | Papaya" one -- one or many "なんちゃらかんちゃら | OrangeAndLemon" : "选择 | chooses"
    "橙子 | Orange" one -- one or many "なんちゃらかんちゃら | OrangeAndLemon" : "选择 | chooses"

 "梅 | Plume" {
        time harvest_date "收获日期"
        text farmer_name "农民名, max_length=1000"
        int tree_serial_number FK "树编号, not blank"
        float ambient_temperature "环境温度, [℃], MinVal=-273.15, MaxVal=100"
        float ambient_humidity "环境湿度, [*100%], MinVal=0, MaxVal=1"
        float fruit_weight "水果重量, [g], MinVal=0, MaxVal=1000"
        text growth_location "生长地点, max_length=1000"
        text organization_name "组织名, max_length=1000"
        text farmer_name "农民名, not blank, max_length=1000"
        text inspector_name "检查员名, max_length=1000"
        text notes "备注, max_length=5000"
    }

    "苹果 | Apple" {
        char tree_serial_number PK "树编号, max_length=255"
        char tree_type "树类型, not blank, max_length=255"
    }

    "香蕉 | Banana" {
        char banana_variety "香蕉品种, not blank, max_length=255"
        float length "长度, [cm], MinVal=0, MaxVal=30"
    }

    "なんちゃらかんちゃら | OrangeAndLemon" {
        char batch_number "批次号, max_length=255"
    }

    "葡萄 | Grapes" {
        float sugar_content "糖分含量, [g/100g], MinVal=0, MaxVal=30"
        float bunch_weight "串重, [g], MinVal=0, MaxVal=1000"
        float vine_rotation_speed "葡萄藤旋转速度, [rpm], MinVal=0, MaxVal=10"
        float water_content "水分含量, [g/100g], MinVal=0, MaxVal=100"
        text growing_conditions_notes "生长条件备注, max_length=5000"
        float berry_diameter "葡萄粒直径, [mm], MinVal=0, MaxVal=30"
    }

    "西瓜 | Watermelon" {
        float weight "重量, [kg], MinVal=0, MaxVal=20"
        float sugar_content "糖分含量, [*100%], MinVal=0, MaxVal=1"
        float hardness "硬度, [Shore], MinVal=0, MaxVal=100"
        text eval_notes "评价备注, max_length=5000"
    }

    "樱桃 | Cherry" {
        bool ripe_status "成熟状态"
        text flavor_description "口感描述, max_length=1000"
        image cherry_image "樱桃图片"
        text eval_notes "评价备注, max_length=5000"
    }

    "菠萝 | Pineapple" {
        char ripening_method "成熟方法, max_length=255"
        float ripening_temperature "成熟温度, [℃], MinVal=-273.15, MaxVal=100"
        float pineapple_weight "菠萝重量, [kg], MinVal=0, MaxVal=5"
    }

    "猕猴桃 | Kiwi" {
        float resting_time_between_harvest "收获间隔时间, [d], MinVal=0, MaxVal=365"
        float resting_time_between_consume "消费间隔时间, [d], MinVal=0, MaxVal=365"
    }

    "草莓 | Strawberry" {
        char cooling_method "冷却方法, max_length=255"
        float pre_cooling_temperature "冷却前温度, [℃], MinVal=-273.15, MaxVal=100"
        float post_cooling_temperature "冷却后温度, [℃], MinVal=-273.15, MaxVal=100"
        float cooling_time "冷却时间, [h], MinVal=0, MaxVal=48"
    }
   "木瓜 | Papaya" {
          time ripeness_date "熟成年月日"
          text origin "産地, max_length=1000"
          int tree_age FK "木の年齢, not blank"
          float weight "重さ,[kg], MinVal=0, MaxVal=23"
          float sweetness "甘さ, [*100%], MinVal=0, MaxVal=1"
          float size "大きさ, [cm], MinVal=0, MaxVal=100"
          text color "色, max_length=1000"
          text flavor "風味, max_length=1000"
          text quality "品質, max_length=1000"
          text notes "メモ, max_length=5000"
    }

    "蓝莓 | Blueberry" {
        char id PK "ID, max_length=255"
        char variety "品種名, not blank, max_length=255"
    }

    "橙子 | Orange" {
        time ripeness_date "熟成年月日"
          text origin "産地, max_length=1000"
          int tree_age FK "木の年齢, not blank"
          float weight "重さ,[kg], MinVal=0, MaxVal=23"
          float sweetness "甘さ, [*100%], MinVal=0, MaxVal=1"
          float size "大きさ, [cm], MinVal=0, MaxVal=100"
          text color "色, max_length=1000"
          text flavor "風味, max_length=1000"
          text quality "品質, max_length=1000"
          text notes "メモ, max_length=5000"
    }

Screenshots

No response

Originally created by @FrostKiwi on GitHub (Jul 10, 2023). ### Feature Description Colleagues and me are a fan of the inclusion of mermaid and the ability to express entity relationship diagrams in plain English. Github provides the ability zoom the resulting diagrams, whilst Gitea does not. Though you can use the browser native touch-zoom to view zoom the diagrams, on a classical PC without touchpad there is no way in Gitea to increase the size of the diagram, since it doesn't scale beyond the screen width when using standard page zoom. Rather frustrating when viewing bigger diagrams. Zooming was supposed to be a feature to be included in mermaid itself, but it doesn't seem it will be included in mermaid-js itself, at least as far as I searched the issue tracker of mermaid-js. There are workarounds and CSS tweaks to allow zooming with standard page zoom or even proper zoom gizmo implementations: https://github.com/mermaid-js/mermaid/issues/1860 It would be excellent if there was any kind of way to realize this. Either through one of the workarounds suggested in the mermaid repo or in a more official capacity. Also I had to tweak the max chars allowed in the mermaid config, since our multi-language usage of it instantly blew past all defaults set by Gitea. Here is a sample Diagram we use. Contents replaced with garbage from ChatGPT. ```mermaid erDiagram "梅 | Plume" zero or many -- zero or one "苹果 | Apple" : "使用 | used" "梅 | Plume" one -- zero or many "香蕉 | Banana" : "使用 | used" "梅 | Plume" one -- zero or many "葡萄 | Grapes" : "使用 | used" "西瓜 | Watermelon" zero or many -- one "梅 | Plume" : "达成 | attains" "なんちゃらかんちゃら | OrangeAndLemon" one or many -- zero or many "梅 | Plume" : "使用 | used" "樱桃 | Cherry" zero or many -- one "梅 | Plume" : "达成 | attains" "梅 | Plume" one -- zero or many "菠萝 | Pineapple" : "执行 | performed" "梅 | Plume" one -- zero or many "猕猴桃 | Kiwi" : "执行 | performed" "梅 | Plume" one -- zero or many "草莓 | Strawberry" : "执行 | performed" "蓝莓 | Blueberry" one -- zero or many "木瓜 | Papaya" : "制造 | Extracts" "蓝莓 | Blueberry" one -- zero or many "橙子 | Orange" : "制造 | Extracts" "木瓜 | Papaya" one -- one or many "なんちゃらかんちゃら | OrangeAndLemon" : "选择 | chooses" "橙子 | Orange" one -- one or many "なんちゃらかんちゃら | OrangeAndLemon" : "选择 | chooses" "梅 | Plume" { time harvest_date "收获日期" text farmer_name "农民名, max_length=1000" int tree_serial_number FK "树编号, not blank" float ambient_temperature "环境温度, [℃], MinVal=-273.15, MaxVal=100" float ambient_humidity "环境湿度, [*100%], MinVal=0, MaxVal=1" float fruit_weight "水果重量, [g], MinVal=0, MaxVal=1000" text growth_location "生长地点, max_length=1000" text organization_name "组织名, max_length=1000" text farmer_name "农民名, not blank, max_length=1000" text inspector_name "检查员名, max_length=1000" text notes "备注, max_length=5000" } "苹果 | Apple" { char tree_serial_number PK "树编号, max_length=255" char tree_type "树类型, not blank, max_length=255" } "香蕉 | Banana" { char banana_variety "香蕉品种, not blank, max_length=255" float length "长度, [cm], MinVal=0, MaxVal=30" } "なんちゃらかんちゃら | OrangeAndLemon" { char batch_number "批次号, max_length=255" } "葡萄 | Grapes" { float sugar_content "糖分含量, [g/100g], MinVal=0, MaxVal=30" float bunch_weight "串重, [g], MinVal=0, MaxVal=1000" float vine_rotation_speed "葡萄藤旋转速度, [rpm], MinVal=0, MaxVal=10" float water_content "水分含量, [g/100g], MinVal=0, MaxVal=100" text growing_conditions_notes "生长条件备注, max_length=5000" float berry_diameter "葡萄粒直径, [mm], MinVal=0, MaxVal=30" } "西瓜 | Watermelon" { float weight "重量, [kg], MinVal=0, MaxVal=20" float sugar_content "糖分含量, [*100%], MinVal=0, MaxVal=1" float hardness "硬度, [Shore], MinVal=0, MaxVal=100" text eval_notes "评价备注, max_length=5000" } "樱桃 | Cherry" { bool ripe_status "成熟状态" text flavor_description "口感描述, max_length=1000" image cherry_image "樱桃图片" text eval_notes "评价备注, max_length=5000" } "菠萝 | Pineapple" { char ripening_method "成熟方法, max_length=255" float ripening_temperature "成熟温度, [℃], MinVal=-273.15, MaxVal=100" float pineapple_weight "菠萝重量, [kg], MinVal=0, MaxVal=5" } "猕猴桃 | Kiwi" { float resting_time_between_harvest "收获间隔时间, [d], MinVal=0, MaxVal=365" float resting_time_between_consume "消费间隔时间, [d], MinVal=0, MaxVal=365" } "草莓 | Strawberry" { char cooling_method "冷却方法, max_length=255" float pre_cooling_temperature "冷却前温度, [℃], MinVal=-273.15, MaxVal=100" float post_cooling_temperature "冷却后温度, [℃], MinVal=-273.15, MaxVal=100" float cooling_time "冷却时间, [h], MinVal=0, MaxVal=48" } "木瓜 | Papaya" { time ripeness_date "熟成年月日" text origin "産地, max_length=1000" int tree_age FK "木の年齢, not blank" float weight "重さ,[kg], MinVal=0, MaxVal=23" float sweetness "甘さ, [*100%], MinVal=0, MaxVal=1" float size "大きさ, [cm], MinVal=0, MaxVal=100" text color "色, max_length=1000" text flavor "風味, max_length=1000" text quality "品質, max_length=1000" text notes "メモ, max_length=5000" } "蓝莓 | Blueberry" { char id PK "ID, max_length=255" char variety "品種名, not blank, max_length=255" } "橙子 | Orange" { time ripeness_date "熟成年月日" text origin "産地, max_length=1000" int tree_age FK "木の年齢, not blank" float weight "重さ,[kg], MinVal=0, MaxVal=23" float sweetness "甘さ, [*100%], MinVal=0, MaxVal=1" float size "大きさ, [cm], MinVal=0, MaxVal=100" text color "色, max_length=1000" text flavor "風味, max_length=1000" text quality "品質, max_length=1000" text notes "メモ, max_length=5000" } ``` ### Screenshots _No response_
GiteaMirror added the type/proposaltopic/ui-interaction labels 2025-11-02 09:30:23 -06:00
GiteaMirror commented 2025-11-02 09:30:23 -06:00
Author
Owner
Copy Link

@silverwind commented on GitHub (Jul 10, 2023):

Maybe have these buttons in a dialog view of the diagram. I find these overlay buttons too often hide vital content of a diagram with the way they are on GH.

@silverwind commented on GitHub (Jul 10, 2023): Maybe have these buttons in a dialog view of the diagram. I find these overlay buttons too often hide vital content of a diagram with the way they are on GH.
GiteaMirror commented 2025-11-02 09:30:23 -06:00
Author
Owner
Copy Link

@FrostKiwi commented on GitHub (Jul 10, 2023):

Maybe have these buttons in a dialog view of the diagram. I find these overlay buttons too often hide vital content of a diagram with the way they are on GH.

I am open to any implementation. Right now, these diagrams are not usable on a PC without touchpad, since they can‘t be zoomed. Any and all solutions are fine by me.

@FrostKiwi commented on GitHub (Jul 10, 2023): > Maybe have these buttons in a dialog view of the diagram. I find these overlay buttons too often hide vital content of a diagram with the way they are on GH. I am open to any implementation. Right now, these diagrams are not usable on a PC without touchpad, since they can‘t be zoomed. Any and all solutions are fine by me.
GiteaMirror commented 2025-11-02 09:30:23 -06:00
Author
Owner
Copy Link

@bioinformatist commented on GitHub (Aug 13, 2023):

We also have a huge class diagram which needs this feature. Will it be implemented later?

@bioinformatist commented on GitHub (Aug 13, 2023): We also have a huge class diagram which needs this feature. Will it be implemented later?
GiteaMirror commented 2025-11-02 09:30:24 -06:00
Author
Owner
Copy Link

@EmVee381 commented on GitHub (Jan 17, 2025):

I know it's not the best solution, but I also came across this need today, and in the end, it seems fine to create a Markdown link that generates a Mermaid live editor. Then you can click on the image, and it will open in the editor. It's a modest workaround until it's resolved in a different way...

@EmVee381 commented on GitHub (Jan 17, 2025): I know it's not the best solution, but I also came across this need today, and in the end, it seems fine to create a Markdown link that generates a Mermaid live editor. Then you can click on the image, and it will open in the editor. It's a modest workaround until it's resolved in a different way... [![](https://mermaid.ink/img/pako:eNpVkEFrwzAMhf-K8GmD5g_kMFiTrZeODdbTkhxErMSmtWUUh1KS_Pc5DRubThLvew_xJtWyJpWr7sLX1qBEOJW1hzTPVWHEDtHh0ECWPc0HiuDY022G_cOBYTAcgvX948bvVwiK6bhiBNFYf142qbj73z3NUFZHDJFD81c5XXmGl8p-mBT_XzFCyfVadZh3mLUoUKA0aqcciUOr0-vTaqhVNOSoVnlaNcq5VrVfEodj5M-bb1UeZaSdEh57o1LYZUjXGDRGKi32gu4HCei_mN0vRNpGlretqHtfyzfZNGVm?type=png)](https://mermaid.live/edit#pako:eNpVkEFrwzAMhf-K8GmD5g_kMFiTrZeODdbTkhxErMSmtWUUh1KS_Pc5DRubThLvew_xJtWyJpWr7sLX1qBEOJW1hzTPVWHEDtHh0ECWPc0HiuDY022G_cOBYTAcgvX948bvVwiK6bhiBNFYf142qbj73z3NUFZHDJFD81c5XXmGl8p-mBT_XzFCyfVadZh3mLUoUKA0aqcciUOr0-vTaqhVNOSoVnlaNcq5VrVfEodj5M-bb1UeZaSdEh57o1LYZUjXGDRGKi32gu4HCei_mN0vRNpGlretqHtfyzfZNGVm)
GiteaMirror commented 2025-11-02 09:30:24 -06:00
Author
Owner
Copy Link

@tsctsc6 commented on GitHub (Sep 19, 2025):

I have a solution, by using SVG-Pan-Zoom library. This method does not require changing the mermaid code itself. It only requires some js code to process the svg generated by mermaid to achieve the effect of panning and zooming, just like github.

@tsctsc6 commented on GitHub (Sep 19, 2025): I have a solution, by using SVG-Pan-Zoom library. This method does not require changing the mermaid code itself. It only requires some js code to process the svg generated by mermaid to achieve the effect of panning and zooming, just like github.
GiteaMirror commented 2025-11-02 09:30:24 -06:00
Author
Owner
Copy Link

@tsctsc6 commented on GitHub (Sep 19, 2025):

I have a solution, by using SVG-Pan-Zoom library. This method does not require changing the mermaid code itself. It only requires some js code to process the svg generated by mermaid to achieve the effect of panning and zooming, just like github.

This solution comes from AI, and I wrote an example based on its prompts. However, I am not familiar with front-end development, so I will rely on you to figure out how to implement it in Gitea(If you accept this solution).

@tsctsc6 commented on GitHub (Sep 19, 2025): > I have a solution, by using SVG-Pan-Zoom library. This method does not require changing the mermaid code itself. It only requires some js code to process the svg generated by mermaid to achieve the effect of panning and zooming, just like github. This solution comes from AI, and I wrote an [example](https://github.com/tsctsc6/ZoomMermaid) based on its prompts. However, I am not familiar with front-end development, so I will rely on you to figure out how to implement it in Gitea(If you accept this solution).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
$20
$250
$50
$500
backport/done
💎 Bounty
docs-update-needed
good first issue
hacktoberfest
issue/bounty
issue/confirmed
issue/critical
issue/duplicate
issue/needs-feedback
issue/not-a-bug
issue/regression
issue/stale
issue/workaround
lgtm/need 2
modifies/api
modifies/translation
outdated/backport/v1.18
outdated/theme/markdown
outdated/theme/timetracker
performance/bigrepo
performance/cpu
performance/memory
performance/speed
pr/breaking
proposal/accepted
proposal/rejected
pr/wip
pull-request
Mirrored from GitHub Pull Request
 reviewed/wontfix
💰 Rewarded
skip-changelog
status/blocked
topic/accessibility
topic/api
topic/authentication
topic/build
topic/code-linting
topic/commit-signing
topic/content-rendering
topic/deployment
topic/distribution
topic/federation
topic/gitea-actions
topic/issues
topic/lfs
topic/mobile
topic/moderation
topic/packages
topic/pr
topic/projects
topic/repo
topic/repo-migration
topic/security
topic/theme
topic/ui
topic/ui-interaction
topic/ux
topic/webhooks
topic/wiki
type/bug
type/deprecation
type/docs
type/enhancement
type/feature
type/miscellaneous
type/proposal
type/question
type/refactoring
type/summary
type/testing
type/upstream
No Label topic/ui-interaction type/proposal
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#11192
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?