go-gitea / gitea

Git with a cup of tea! Painless self-hosted all-in-one software development service, including Git hosting, code review, team collaboration, package registry and CI/CD
https://gitea.com
MIT License
45.03k stars 5.49k forks source link

mermaid diagrams cause empty space below, depending on width. #24656

Closed FrostKiwi closed 1 year ago

FrostKiwi commented 1 year ago

Description

Mermaid diagrams like this:

erDiagram
    AppleBatch zero or many -- zero or one AppleInfo : Harvested
    AppleBatch one -- zero or many WateringMethods : Used

    AppleBatch one -- zero or many Pesticides : Used
    SweetnessResults zero or many -- one AppleBatch : Evaluated
    FruitCombo one or many -- zero or many AppleBatch : Used
    TextureResults zero or many -- one AppleBatch : Evaluated

    AppleBatch one -- zero or many Pruning : Performed
    AppleBatch one -- zero or many Thinning : Performed
    AppleBatch one -- zero or many Picking : Performed

    FarmerInfo one -- zero or many Fertilizer : Produced
    FarmerInfo one -- zero or many SoilType : Produced

    Fertilizer one -- one or many FruitCombo : Chose
    SoilType one -- one or many FruitCombo : Chose

    AppleBatch {
        time harvest_date "Harvest Date"
        text customer_name "Customer Name"
        int batch_number FK "Batch Number"
        float farm_temperature "Farm Temperature"
        float farm_humidity "Farm Humidity"
        float total_weight "Total Weight"
        text storage_location "Storage Location"
        text farm_name "Farm Name"
        text picker_name "Picker Name"
        text inspector_name "Inspector Name"
        text notes "Notes"
    }

    AppleInfo {
        char batch_number PK "Batch Number"
        char apple_variety "Apple Variety"
    }

    WateringMethods {
        char method_name "Method Name"
        float water_volume "Water Volume"
    }

    FruitCombo {
        char combo_name "Combo Name"
    }

    Pesticides {
        float spray_rate "Spray Rate"
        float area_covered "Area Covered"
        float treatment_duration "Treatment Duration"
        float pesticide_concentration "Pesticide Concentration"
        float application_speed "Application Speed"
        float nozzle_height "Nozzle Height"
        text treatment_notes "Treatment Notes"
    }

    SweetnessResults {
        float sugar_content "Sugar Content"
        float acidity "Acidity"
        float crispness "Crispness"
        float juiciness "Juiciness"
        text tasting_notes "Tasting Notes"
    }

    TextureResults {
        bool good_texture "Good Texture"
        text description "Description"
        image observation_image "Observation Image"
        text inspection_notes "Inspection Notes"
    }

    Pruning {
        char pruning_method "Pruning Method"
        float pruning_intensity "Pruning Intensity"
        float pruning_duration "Pruning Duration"
        float branches_removed "Branches Removed"
        float pruning_speed "Pruning Speed"
    }

    Thinning {
        float thinning_interval "Thinning Interval"
        float thinning_duration "Thinning Duration"
    }

    Picking {
        char picking_strategy "Picking Strategy"
        float pre_picking_temperature "Pre-Picking Temperature"
        float post_picking_temperature "Post-Picking Temperature"
        float picking_duration "Picking Duration"
    }

    Fertilizer {
        char fertilizer_brand "Fertilizer Brand"
        char main_ingredients "Main Ingredients"
        char similar_product "Similar Product"
        bool discontinuation_status "Discontinuation Status"
        float nitrogen_ratio "Nitrogen Ratio"
        float phosphorus_ratio "Phosphorus Ratio"
        float potassium_ratio "Potassium Ratio"
        float smallest_grain_size "Smallest Grain Size"
        float largest_grain_size "Largest Grain Size"
        float visible_density "Visible Density"
        float compact_density "Compact Density"
        float pourability "Pourability"
        text additional_details "Additional Details"
    }

    SoilType {
        char soil_classification "Soil Classification"
        char main_components "Main Components"
        char similar_soil "Similar Soil"
        bool discontinuation_status "Discontinuation Status"
        float volume_measurement "Volume Measurement"
        text terrain_data_location "Terrain Data Location"
        float thermal_expansion_coefficient "Thermal Expansion Coefficient"
        float heat_conductivity "Heat Conductivity"
        float mass_density "Mass Density"
        float surface_coarseness_Ra "Surface Coarseness (Ra)"
        float sunlight_reflectivity "Sunlight Reflectivity"
        text additional_details "Additional Details"
    }

    FarmerInfo {
        char farmer_identification "Farmer Identification"
        char farm_identification "Farm Identification"
        char farming_country "Farming Country"
    }

Produce a lot of white space below the diagram: image Interestingly enough, the empty white space depends on how wide the diagram fans out. For instance here is the same but with short names and the resulting smaller useless whitespace: image

Here is the markdown producing the above result with lot's of whitespace:

Mark down causing the white space. Please note, I put a pound sign before the two inner ``` code boxes, so that it displays correctly in github. ```markdown ## Paragraph 1 #```mermaid erDiagram AppleBatch zero or many -- zero or one AppleInfo : Harvested AppleBatch one -- zero or many WateringMethods : Used AppleBatch one -- zero or many Pesticides : Used SweetnessResults zero or many -- one AppleBatch : Evaluated FruitCombo one or many -- zero or many AppleBatch : Used TextureResults zero or many -- one AppleBatch : Evaluated AppleBatch one -- zero or many Pruning : Performed AppleBatch one -- zero or many Thinning : Performed AppleBatch one -- zero or many Picking : Performed FarmerInfo one -- zero or many Fertilizer : Produced FarmerInfo one -- zero or many SoilType : Produced Fertilizer one -- one or many FruitCombo : Chose SoilType one -- one or many FruitCombo : Chose AppleBatch { time harvest_date "Harvest Date" text customer_name "Customer Name" int batch_number FK "Batch Number" float farm_temperature "Farm Temperature" float farm_humidity "Farm Humidity" float total_weight "Total Weight" text storage_location "Storage Location" text farm_name "Farm Name" text picker_name "Picker Name" text inspector_name "Inspector Name" text notes "Notes" } AppleInfo { char batch_number PK "Batch Number" char apple_variety "Apple Variety" } WateringMethods { char method_name "Method Name" float water_volume "Water Volume" } FruitCombo { char combo_name "Combo Name" } Pesticides { float spray_rate "Spray Rate" float area_covered "Area Covered" float treatment_duration "Treatment Duration" float pesticide_concentration "Pesticide Concentration" float application_speed "Application Speed" float nozzle_height "Nozzle Height" text treatment_notes "Treatment Notes" } SweetnessResults { float sugar_content "Sugar Content" float acidity "Acidity" float crispness "Crispness" float juiciness "Juiciness" text tasting_notes "Tasting Notes" } TextureResults { bool good_texture "Good Texture" text description "Description" image observation_image "Observation Image" text inspection_notes "Inspection Notes" } Pruning { char pruning_method "Pruning Method" float pruning_intensity "Pruning Intensity" float pruning_duration "Pruning Duration" float branches_removed "Branches Removed" float pruning_speed "Pruning Speed" } Thinning { float thinning_interval "Thinning Interval" float thinning_duration "Thinning Duration" } Picking { char picking_strategy "Picking Strategy" float pre_picking_temperature "Pre-Picking Temperature" float post_picking_temperature "Post-Picking Temperature" float picking_duration "Picking Duration" } Fertilizer { char fertilizer_brand "Fertilizer Brand" char main_ingredients "Main Ingredients" char similar_product "Similar Product" bool discontinuation_status "Discontinuation Status" float nitrogen_ratio "Nitrogen Ratio" float phosphorus_ratio "Phosphorus Ratio" float potassium_ratio "Potassium Ratio" float smallest_grain_size "Smallest Grain Size" float largest_grain_size "Largest Grain Size" float visible_density "Visible Density" float compact_density "Compact Density" float pourability "Pourability" text additional_details "Additional Details" } SoilType { char soil_classification "Soil Classification" char main_components "Main Components" char similar_soil "Similar Soil" bool discontinuation_status "Discontinuation Status" float volume_measurement "Volume Measurement" text terrain_data_location "Terrain Data Location" float thermal_expansion_coefficient "Thermal Expansion Coefficient" float heat_conductivity "Heat Conductivity" float mass_density "Mass Density" float surface_coarseness_Ra "Surface Coarseness (Ra)" float sunlight_reflectivity "Sunlight Reflectivity" text additional_details "Additional Details" } FarmerInfo { char farmer_identification "Farmer Identification" char farm_identification "Farm Identification" char farming_country "Farming Country" } #``` # Paragraph 2 ```

Gitea Version

1.19.3

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

Self-hosted ubuntu LTS server, downloaded linux-amd64 binary from the official website and made a systemd service out of that.

Database

MySQL

silverwind commented 1 year ago

This was fixed in https://github.com/go-gitea/gitea/pull/24049 and will be in upcoming 1.20.

The actual bug is in mermaid.js, follow https://github.com/mermaid-js/mermaid/issues/4289.