[SUPPORT] Mermaid - Gantt chart - can not change width

[oliverbacsi]

Script name : Mermaid

Script authors

• dohliam (Liam Doherty) : Liam Doherty
• cyclops1982 (Ruben) : Ruben

Question

How can we change the width of the Gantt chart in the preview?
If the Markdown document is exported or printed to a PDF file (Landscape layout), the width of the Gantt chart is less than the half of the page and there is no way to make it fill the whole page width.
After browsing the web for solutions some people adviced to use Style tags / Style sheets.
Already tried but did not work:

• Apply a <STYLE> tag inside the Markdown file for the .mermaid and .mermaid svg items that contains element: width=100%;
• Put a mermaid.css file into the script's folder ~/.local/share/PBE/QOwnNotes/scripts/mermaid that contains the styling information for .mermaid and .mermaid svg elements

I am wondering how could we adjust the width of the Gantt chart in the export file.
sample screenshot blurred to hide sensitive information

Output from the debug section in the settings dialog

QOwnNotes Debug Information

General Info

Current Date: Sat Nov 29 18:58:58 2025
Version: 25.11.5
Build date: Nov 21 2025
Build number: 1232
Platform: linux (xcb)
Operating System: Ubuntu 24.04.3 LTS
Build architecture: x86_64
Current architecture: x86_64
Release: Launchpad PPA Qt6
Qt Version (build): 6.4.2
Qt Version (runtime): 6.4.2
Portable mode: no
Settings path / key: /home/oliver/.config/PBE/QOwnNotes.conf
Application database path: /home/oliver/.local/share/PBE/QOwnNotes/QOwnNotes.sqlite
Application arguments: /usr/bin/QOwnNotes
Qt Debug: no
System Botan: no
Libgit2: no
Locale (system): en_US
Locale (interface): empty
Primary screen resolution: 1366x768
Icon theme: breeze-dark-qownnotes
Notes in current note folder: 5
Calendar items: 0
Enabled scripts: 1
Database drivers: QSQLITE

Server Info

serverUrl: empty
appIsValid: yes
notesPathExists: empty
serverVersion: empty
appVersion: empty

Spellchecking

Enabled: true
Selected language: auto
Language codes: en_AU, en_CA, en_GB, en_US, en_ZA, hu_HU
Language names: Australian English (Australia), Canadian English (Canada), British English (United Kingdom), American English (United States), English (South Africa), magyar (Magyarország)
Application dictionaries path: /home/oliver/.local/share/PBE/QOwnNotes/dicts

Note folders

currentNoteFolderId: 1

Note folder default

id: 1
isCurrent: yes
activeTagId: 0
localPath: /home/oliver/_settings_/Notes
remotePath: Notes
cloudConnectionId: 1
isShowSubfolders: yes
isUseGit: no
allowDifferentNoteFileName: no
activeNoteSubFolder name: empty
database file: /home/oliver/_settings_/Notes/notes.sqlite

Cloud connections

Cloud connection Default

id: 1
isCurrent: yes
serverUrl: empty
username: empty
accountId: empty

Enabled scripts

Script Mermaid Diagrams

id: 1
path: /home/oliver/.local/share/PBE/QOwnNotes/scripts/mermaid/mermaid.qml
variablesJson:

{
}

identifier: mermaid
version: 0.0.4
minAppVersion: 22.1.1

Settings

AboutDialog/geometry (QByteArray): <binary data>
ActiveNoteHistoryItem (NoteHistoryItem): <binary data>
Debug/fakeOldVersionNumber (QString): false
Debug/fileLogging: empty
Editor/CurrentSchemaKey (QString): EditorColorSchema-046e1c8d-9175-4272-81d8-203febd5bc8a
Editor/autoBracketClosing (QString): true
Editor/autoBracketRemoval (QString): true
Editor/disableCursorBlinking (QString): false
Editor/editorWidthInDFMOnly (QString): true
Editor/highlightCurrentLine (QString): true
Editor/indentSize (QString): 4
Editor/removeTrailingSpaces (QString): false
Editor/showLineNumbers (QString): true
Editor/useTabIndent (QString): false
Editor/vimMode (QString): false
FileDialog/LastPath (QString): /home/oliver
FileDialog/LastPath-NoteHTMLExport (QString): /home/oliver
FileDialog/LastPath-NotePDFExport (QString): /home/oliver
LastUpdateCheck (QDateTime): 2025-11-29T18:56:57.218
MainWindow/geometry (QByteArray): <binary data>
MainWindow/mainToolBar.iconSize (QString): 24
MainWindow/menuBarGeometry (QByteArray): <binary data>
MainWindow/noteTextEdit.code.font (QString): DejaVu Sans Mono,10,-1,5,400,0,0,0,0,0,0,0,0,0,0,1
MainWindow/noteTextEdit.font (QString): Ubuntu Mono,10,-1,5,400,0,0,0,0,0,0,0,0,0,0,1
MainWindow/noteTextView.code.font (QString): monospace,11,-1,2,400,0,0,0,0,0,0,0,0,0,0,1
MainWindow/noteTextView.font (QString): Ubuntu,11,-1,5,400,0,0,0,0,0,0,0,0,0,0,1
MainWindow/noteTextView.ignoreCodeFontSize (QString): true
MainWindow/noteTextView.refreshDebounceTime (QString): 600
MainWindow/noteTextView.rtl (QString): false
MainWindow/noteTextView.underline (QString): false
MainWindow/noteTextView.useEditorStyles (QString): true
MainWindow/noteTextView.useInternalExportStyling (QString): true
NoteFolder-1/NoteTabNameList (QString): STATUS-FLEX
NoteFolder-1/NoteTabStickinessList: empty
NoteFolder-1/NoteTabSubFolderPathDataList (QString): empty
NoteHistory-1 (QVariantList): <variant list with 3 item(s)>
NoteHistoryCurrentIndex-1 (QString): 2
PiwikClientId (QString): <hidden>
Printer/NotePDFExport (QByteArray): <binary data>
Printer/NotePrinting (QByteArray): <binary data>
ScriptRepositoryDialog/geometry (QByteArray): <binary data>
ScriptRepositoryDialog/mainSplitterState (QByteArray): <binary data>
SearchEngineId (QString): 0
SettingsDialog/geometry (QByteArray): <binary data>
SettingsDialog/mainSplitterState (QByteArray): <binary data>
ShowSystemTray (QString): false
StartHidden (QString): false
WelcomeDialog/geometry (QByteArray): <binary data>
acceptAllExternalModifications (QString): false
ai/groq/apiKey (QString): <hidden>
ai/openai/apiKey (QString): <hidden>
ai/responseTimeout (QString): 15
allowNoteEditing (bool): true
allowOnlyOneAppInstance (QString): true
appMetrics/disableAppHeartbeat (QString): true
appMetrics/disableTracking (QString): true
appMetrics/notificationShown (QString): true
autoReadOnlyMode (QString): false
autoReadOnlyModeTimeout (QString): 30
automaticNoteFolderDatabaseClosing (QString): false
checkSpelling (bool): true
closeTodoListAfterSave (QString): false
cryptoKey (QString): <hidden>
currentNoteFolderId (QString): 1
currentWorkspace (QString): initial
cursorWidth (QString): 1
darkMode (QString): true
darkModeColors (QString): true
darkModeIconTheme (QString): true
darkModeTrayIcon (QString): true
defaultNoteFileExtension (QString): md
disableAutomaticUpdateDialog (QString): true
disableSavedSearchesAutoCompletion (QString): false
dockWasInitializedOnce (QString): true
enableNoteChecksumChecks (QString): false
enableNoteTree (QString): false
enableSocketServer (QString): false
enableWebAppSupport (QString): false
externalEditorPath (QString): empty
fullyHighlightedBlockquotes (QString): false
gitCommitInterval (QString): 30
gitExecutablePath (QString): empty
gitLogCommand (QString): empty
guiFirstRunInit (bool): true
hideIconsInMenus (QString): false
hideTabCloseButton (QString): false
ignoreAllExternalModifications (QString): false
ignoreAllExternalNoteFolderChanges (QString): false
ignoreNoteSubFolders (QString): ^\.
ignoredNoteFiles (QString): empty
imageScaleDown (QString): false
imageScaleDownMaximumHeight (QString): 1024
imageScaleDownMaximumWidth (QString): 1024
initialLayoutIdentifier (QString): full
insertTimeFormat (QString): yyyy-MM-dd hh:mm
interfaceFontSize (QString): 11
interfaceLanguage (QString): empty
interfaceScalingFactor (QString): 100
internalIconTheme (QString): false
itemHeight (QString): 17
legacyLinking (QString): false
localTrash/autoCleanupDays (QString): 30
localTrash/autoCleanupEnabled (QString): true
localTrash/supportEnabled (QString): true
markdownHighlightingEnabled (QString): true
maxNoteFileSize (QString): 1048576
navigationPanelAutoSelect (QString): true
navigationPanelHideSearch (QString): false
networking/ignoreSSLErrors (QString): true
networking/proxyType (QString): 2
newNoteAskHeadline (QString): false
noteEditIsCentralWidget (QString): true
noteFileExtensionList (QStringList): md, txt
noteListPreview (QString): false
noteSaveIntervalTime (QString): 10
noteSubfoldersPanelDisplayAsFullTree (QString): true
noteSubfoldersPanelHideSearch (QString): false
noteSubfoldersPanelOrder (QString): 0
noteSubfoldersPanelShowFullPath (QString): false
noteSubfoldersPanelShowNotesRecursively (QString): false
noteSubfoldersPanelShowRootFolderName (QString): true
noteSubfoldersPanelSort (QString): 1
noteSubfoldersPanelTabsUnsetAllNotesSelection (QString): false
notesPanelOrder (QString): 1
notesPanelSort (QString): 1
notesPath (QString): /home/oliver/_settings_/Notes
notifyAllExternalModifications (QString): true
overrideInterfaceFontSize (QString): false
overrideInterfaceScalingFactor (QString): false
ownCloud/supportEnabled (QString): false
ownCloud/todoCalendarBackend (QString): 3
ownCloud/todoCalendarCalDAVPassword (QString): <hidden>
ownCloud/todoCalendarCalDAVServerUrl (QString): empty
ownCloud/todoCalendarCalDAVUsername (QString): empty
ownCloud/todoCalendarCloudConnectionId (QString): 1
ownCloud/todoCalendarDisplayNameList: empty
ownCloud/todoCalendarEnabledList: empty
ownCloud/todoCalendarEnabledUrlList: empty
ownCloud/todoCalendarUrlList: empty
ownCloudInfo/appIsValid (bool): true
ownCloudInfo/connectionErrorMessage (QString): empty
ownCloudInfo/notesPathExistsText (QString): empty
ownCloudInfo/serverVersion (QString): empty
restoreCursorPosition (QString): true
restoreLastNoteAtStartup (QString): false
restoreNoteTabs (QString): true
showMatches (QString): true
showMenuBar (bool): true
showStatusBar (bool): true
showStatusBarNotePath (QString): true
showStatusBarRelativeNotePath (QString): false
spellCheckLanguage (QString): auto
startInReadOnlyMode (QString): false
systemIconTheme (QString): false
taggingShowNotesRecursively (QString): false
tagsPanelHideNoteCount (QString): true
tagsPanelHideSearch (QString): true
tagsPanelOrder (QString): 0
tagsPanelSort (QString): 0
todoCalendarSupport (QString): true
toolbar/1/items (QStringList): actionFormat_text_bold, actionFormat_text_italic, actionStrike_out_text, actionInsert_code_block, actionInsert_block_quote
toolbar/1/name (QString): formattingToolbar
toolbar/1/title (QString): formatting toolbar
toolbar/2/items (QStringList): actionInsert_text_link, actionInsert_image, actionInsert_current_time
toolbar/2/name (QString): insertingToolbar
toolbar/2/title (QString): inserting toolbar
toolbar/3/items (QStringList): action_Encrypt_note, actionEdit_encrypted_note, actionDecrypt_note
toolbar/3/name (QString): encryptionToolbar
toolbar/3/title (QString): encryption toolbar
toolbar/4/items (QStringList): actionEnable_AI, actionAiBackendComboBox, actionAiModelComboBox
toolbar/4/name (QString): aiToolbar
toolbar/4/title (QString): AI toolbar
toolbar/5/items (QStringList): actionWorkspaceComboBox, actionStore_as_new_workspace, actionRemove_current_workspace, actionRename_current_workspace, actionSwitch_to_previous_workspace, actionUnlock_panels, , actionToggle_distraction_free_mode, action_Increase_note_text_size, action_Decrease_note_text_size, action_Reset_note_text_size
toolbar/5/name (QString): windowToolbar
toolbar/5/title (QString): window toolbar
toolbar/6/items (QString): action_Quit
toolbar/6/name (QString): quitToolbar
toolbar/6/title (QString): quit toolbar
toolbar/7/items (QString): action_Quit
toolbar/7/name (QString): quitToolbar
toolbar/7/title (QString): quit toolbar
toolbar/size (QString): 7
useNoteFolderButtons (QString): false
useUNIXNewline (QString): false
webAppClientService/serverUrl (QString): wss://app.qownnotes.org
webAppClientService/token (QString): <hidden>
webSocketServerService/bookmarksNoteName (QString): Bookmarks
webSocketServerService/bookmarksTag (QString): bookmarks
webSocketServerService/commandSnippetsNoteName (QString): Commands
webSocketServerService/commandSnippetsTag (QString): commands
webSocketServerService/port (QString): 22222
workspace-initial/name (QString): Full
workspace-initial/noteSubFolderDockWidgetVisible (QString): true
workspace-initial/windowState (QByteArray): <binary data>
workspaces (QString): initial

System environment

LANGUAGE: en
USER: oliver
LC_TIME: hu_HU.UTF-8
XDG_SEAT: seat0
XDG_SESSION_TYPE: x11
SHLVL: 0
HOME: /home/oliver
DESKTOP_SESSION: cinnamon
XDG_SEAT_PATH: /org/freedesktop/DisplayManager/Seat0
LC_MONETARY: hu_HU.UTF-8
DBUS_SESSION_BUS_ADDRESS: unix:path=/run/user/1000/bus
DEBUGINFOD_URLS: https://debuginfod.ubuntu.com
GTK_IM_MODULE: ibus
LOGNAME: oliver
XDG_SESSION_CLASS: user
XDG_SESSION_ID: c5
PATH: /home/oliver/.local/bin:/home/oliver/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
GDM_LANG: en
PAPERSIZE: a4
GTK3_MODULES: xapp-gtk3-module
XDG_SESSION_PATH: /org/freedesktop/DisplayManager/Session0
LC_ADDRESS: hu_HU.UTF-8
XDG_RUNTIME_DIR: /run/user/1000
DISPLAY: :0
LANG: en_US.UTF-8
LC_TELEPHONE: hu_HU.UTF-8
XMODIFIERS: @im=ibus
XDG_SESSION_DESKTOP: cinnamon
XAUTHORITY: /home/oliver/.Xauthority
XDG_GREETER_DATA_DIR: /var/lib/lightdm-data/oliver
SHELL: /bin/bash
LC_NAME: hu_HU.UTF-8
QT_ACCESSIBILITY: 1
GDMSESSION: cinnamon
LC_MEASUREMENT: hu_HU.UTF-8
GPG_AGENT_INFO: /run/user/1000/gnupg/S.gpg-agent:0:1
LC_IDENTIFICATION: hu_HU.UTF-8
QT_IM_MODULE: ibus
XDG_VTNR: 7
PWD: /home/oliver
XDG_CONFIG_DIRS: /etc/xdg/xdg-cinnamon:/etc/xdg
CLUTTER_IM_MODULE: ibus
XDG_DATA_DIRS: /usr/share/gnome:/usr/share/cinnamon:/usr/share/gnome:/usr/local/share:/usr/share:/var/lib/snapd/desktop
LC_NUMERIC: hu_HU.UTF-8
LC_PAPER: hu_HU.UTF-8
GNOME_DESKTOP_SESSION_ID: this-is-deprecated
SESSION_MANAGER: local/sarmx777:@/tmp/.ICE-unix/2201,unix/sarmx777:/tmp/.ICE-unix/2201
XDG_CURRENT_DESKTOP: X-Cinnamon
SSH_AUTH_SOCK: /run/user/1000/keyring/ssh
GIO_LAUNCHED_DESKTOP_FILE: /home/oliver/.local/share/applications/PBE.QOwnNotes.desktop
GIO_LAUNCHED_DESKTOP_FILE_PID: 26774
GJS_DEBUG_OUTPUT: stderr
GJS_DEBUG_TOPICS: JS ERROR;JS LOG
CINNAMON_VERSION: 6.0.4
XDG_ACTIVATION_TOKEN: cinnamon/QOwnNotes/2564-3-sarmx777_TIME1282218

Relevant log output in the Log panel

[pbek]

If an image is created, that usually gets resized to fit the width of the preview.
What is the HTML that is generated in the preview?

[oliverbacsi]

My problem was when I generated the PDF, but You are right, the Gantt chart is also narrow in the HTML export.

So when I check the HTML export, it starts with:

<html><head><meta charset="utf-8"/><style>   [...]   img { max-width: 100%; }

so the styling of the image only sets a maximum width, but does not expand the image to "fit width".
Then I roll down the HTML file to the actual image, it says:

<p><img src="data:image/jpeg;base64,/9j/4AAQS   [...]   AAAAP/9k=" alt=""width="535"></p>

There is the actual JPEG data in base64 encoding, so there is not too much to influence on the generated picture size any more, just the width tag is impacting its stretched width somewhat.
I was curious whether it is changing the size at all, so I removed the width="535" parameter , and the picture grew a little bit (both sizes, X and Y), but still far away from filling the picture.
I examined the JPEG picture in a different browser tab, and it says the size is 784 x 652 ...

Then I changed my layout within the software, so that the Preview window has a different (larger) size, and did everything new again.

• In the PDF export : Now the picture of the Gantt chart is much bigger than before
  • but still does not fill the whole width
  • although the height is ridiculously large now
• In the HTML export : The picture is larger here as well, but
  • it seems that the generated picture is the same, just the width tag was changed to width="784" that is no use at all, as the picture is 784 anyway.

---

Conclusion

The generated picture of the charts has always the same size, and the viewing layout of the software impacts the width parameter of the image insertion. Which is a pity as I am working on a relatively small display laptop, so the viewing window of the preview is relatively narrow, causing that I can only have very small pictures in the export file. The actual viewing layout of the program should not impact the file export properties.
I am still suggesting that this should be handled rather on the script level:
There should be more parameters for a Gantt chart within Mermaid, like:

gantt
    title XXX
    dateformat YYYY-MM-DD
    [...]
    exportwidth 1200
    exportheight 400

So that the user could influence the size and ratio of the generated picture.

[pbek]

You can overwrite generated HTML (also only for the export) with https://www.qownnotes.org/scripting/hooks.html#notetomarkdownhtmlhook.