Skip to content

Commit 152bea6

Browse files
timkpainetimkpaine
authored
Merge pull request #203 from timkpaine/tkp/cfg
Tweak default CSS rules for better defaults, fix merge issue for full…
2 parents 0097e56 + 421db3c commit 152bea6

7 files changed

Lines changed: 108 additions & 53 deletions

File tree

‎CHANGELOG.rst‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
Changelog
22
---------
33

4+
1.2.1 (November 23, 2025)
5+
+++++++++++++++++++++
6+
7+
- Adjust chart size defaults to closer resember previous
8+
- Fix issue with fullscreen classes after rebase
9+
410
1.2.0 (November 23, 2025)
511
+++++++++++++++++++++
612

‎README.rst‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,14 @@ Config values
230230

231231
Enables zooming in all the generated Mermaid diagrams.
232232

233+
``mermaid_width``
234+
235+
Sets the default diagram width within its container. Default to 100%.
236+
237+
``mermaid_height``
238+
239+
Sets the default diagram height within its container. Default to 500px.
240+
233241
``mermaid_fullscreen``
234242

235243
Enables fullscreen modal viewing for all Mermaid diagrams. When enabled, a fullscreen button

‎sphinxcontrib/mermaid/__init__.py‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@
4343

4444
# Load fullscreen CSS and JavaScript from external files
4545
_MODULE_DIR = Path(__file__).parent
46-
_FULLSCREEN_CSS = (_MODULE_DIR / "fullscreen.css").read_text(encoding="utf-8")
47-
_MERMAID_CSS = (_MODULE_DIR / "default.css").read_text(encoding="utf-8")
48-
_MERMAID_RUN = (_MODULE_DIR / "default.js").read_text(encoding="utf-8")
46+
_FULLSCREEN_CSS = (_MODULE_DIR / "fullscreen.css.j2").read_text(encoding="utf-8")
47+
_MERMAID_CSS = (_MODULE_DIR / "default.css.j2").read_text(encoding="utf-8")
48+
_MERMAID_RUN = (_MODULE_DIR / "default.js.j2").read_text(encoding="utf-8")
4949

5050
mapname_re = re.compile(r'<map id="(.*?)"')
5151
_MERMAID_INIT_JS_DEFAULT = "mermaid.initialize({startOnLoad:false});"
@@ -451,6 +451,8 @@ def install_js(
451451
_has_fullscreen = app.config.mermaid_fullscreen
452452
_button_text = app.config.mermaid_fullscreen_button
453453
_button_opacity = app.config.mermaid_fullscreen_button_opacity
454+
_mermaid_width = app.config.mermaid_width
455+
_mermaid_height = app.config.mermaid_height
454456

455457
if app.config.mermaid_output_format == "raw":
456458
if app.config.d3_use_local:
@@ -466,6 +468,10 @@ def install_js(
466468
if not _has_fullscreen:
467469
_d3_js_script = _MERMAID_RUN.format(
468470
mermaid_js_url=_mermaid_js_url,
471+
common_css=_MERMAID_CSS.format(
472+
mermaid_width=_mermaid_width,
473+
mermaid_height=_mermaid_height,
474+
),
469475
fullscreen_css="", # ignored
470476
button_text=_button_text, # ignored
471477
button_opacity=_button_opacity, # ignored
@@ -493,6 +499,10 @@ def install_js(
493499
if not _has_fullscreen:
494500
_d3_js_script = _MERMAID_RUN.format(
495501
mermaid_js_url=_mermaid_js_url,
502+
common_css=_MERMAID_CSS.format(
503+
mermaid_width=_mermaid_width,
504+
mermaid_height=_mermaid_height,
505+
),
496506
fullscreen_css="", # ignored
497507
button_text=_button_text, # ignored
498508
button_opacity=_button_opacity, # ignored
@@ -528,7 +538,14 @@ def install_js(
528538
count = -1
529539
_d3_js_script = _MERMAID_RUN.format(
530540
mermaid_js_url=_mermaid_js_url,
531-
fullscreen_css=_FULLSCREEN_CSS,
541+
common_css=_MERMAID_CSS.format(
542+
mermaid_width=_mermaid_width,
543+
mermaid_height=_mermaid_height,
544+
),
545+
fullscreen_css=_FULLSCREEN_CSS.format(
546+
mermaid_width=_mermaid_width,
547+
mermaid_height=_mermaid_height,
548+
),
532549
button_text=_button_text,
533550
button_opacity=_button_opacity,
534551
d3_selector=_d3_selector if _d3_selector else ".mermaid svg",
@@ -542,7 +559,14 @@ def install_js(
542559
# Fullscreen without zoom
543560
_fullscreen_js_script = _MERMAID_RUN.format(
544561
mermaid_js_url=_mermaid_js_url,
545-
fullscreen_css=_FULLSCREEN_CSS,
562+
common_css=_MERMAID_CSS.format(
563+
mermaid_width=_mermaid_width,
564+
mermaid_height=_mermaid_height,
565+
),
566+
fullscreen_css=_FULLSCREEN_CSS.format(
567+
mermaid_width=_mermaid_width,
568+
mermaid_height=_mermaid_height,
569+
),
546570
button_text=_button_text,
547571
button_opacity=_button_opacity,
548572
d3_selector="", # ignored
@@ -558,6 +582,7 @@ def install_js(
558582
None,
559583
body=_MERMAID_RUN.format(
560584
mermaid_js_url=_mermaid_js_url,
585+
common_css="",
561586
fullscreen_css="",
562587
button_text="",
563588
button_opacity="",
@@ -601,6 +626,8 @@ def setup(app):
601626
app.add_config_value("d3_use_local", "", "html")
602627
app.add_config_value("d3_version", "7.9.0", "html")
603628
app.add_config_value("mermaid_d3_zoom", False, "html")
629+
app.add_config_value("mermaid_width", "100%", "html")
630+
app.add_config_value("mermaid_height", "500px", "html")
604631
app.add_config_value("mermaid_fullscreen", True, "html")
605632
app.add_config_value("mermaid_fullscreen_button", "⛶", "html")
606633
app.add_config_value("mermaid_fullscreen_button_opacity", "50", "html")

‎sphinxcontrib/mermaid/default.css‎

Whitespace-only changes.

‎sphinxcontrib/mermaid/default.css.j2‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
pre.mermaid {{
2+
/* Same as .mermaid-container > pre */
3+
display: block;
4+
width: {mermaid_width};
5+
}}
6+
7+
pre.mermaid > svg {{
8+
/* Same as .mermaid-container > pre > svg */
9+
height: {mermaid_height};
10+
width: 100%;
11+
max-width: 100% !important;
12+
}}

sphinxcontrib/mermaid/default.js renamed to sphinxcontrib/mermaid/default.js.j2

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import mermaid from "{mermaid_js_url}";
22

3-
const style = document.createElement('style');
4-
style.textContent = `{fullscreen_css}`;
5-
document.head.appendChild(style);
3+
const defaultStyle = document.createElement('style');
4+
defaultStyle.textContent = `{common_css}`;
5+
document.head.appendChild(defaultStyle);
6+
7+
const fullscreenStyle = document.createElement('style');
8+
fullscreenStyle.textContent = `{fullscreen_css}`;
9+
document.head.appendChild(fullscreenStyle);
610

711
// Detect if page has dark background
812
const isDarkTheme = () => {{

sphinxcontrib/mermaid/fullscreen.css renamed to sphinxcontrib/mermaid/fullscreen.css.j2

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
.mermaid-container {
1+
.mermaid-container {{
22
display: flex;
33
flex-direction: row;
44
width: 100%;
5-
}
5+
}}
66

7-
.mermaid-container > pre {
7+
.mermaid-container > pre {{
88
display: block;
9-
width: 95%;
10-
}
9+
width: {mermaid_width};
10+
}}
1111

12-
.mermaid-container > pre > svg {
12+
.mermaid-container > pre > svg {{
13+
height: {mermaid_height};
1314
width: 100%;
14-
height: auto;
1515
max-width: 100% !important;
16-
}
16+
}}
1717

18-
.mermaid-fullscreen-btn {
18+
.mermaid-fullscreen-btn {{
1919
width: 28px;
2020
height: 28px;
2121
background: rgba(255, 255, 255, 0.95);
@@ -31,50 +31,50 @@
3131
line-height: 1;
3232
padding: 0;
3333
color: #333;
34-
}
34+
}}
3535

36-
.mermaid-fullscreen-btn:hover {
36+
.mermaid-fullscreen-btn:hover {{
3737
opacity: 100% !important;
3838
background: rgba(255, 255, 255, 1);
3939
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
4040
transform: scale(1.1);
41-
}
41+
}}
4242

43-
.mermaid-fullscreen-btn.dark-theme {
43+
.mermaid-fullscreen-btn.dark-theme {{
4444
background: rgba(50, 50, 50, 0.95);
4545
border: 1px solid rgba(255, 255, 255, 0.3);
4646
color: #e0e0e0;
47-
}
47+
}}
4848

49-
.mermaid-fullscreen-btn.dark-theme:hover {
49+
.mermaid-fullscreen-btn.dark-theme:hover {{
5050
background: rgba(60, 60, 60, 1);
5151
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.2);
52-
}
52+
}}
5353

54-
.mermaid-fullscreen-modal {
54+
.mermaid-fullscreen-modal {{
5555
display: none;
5656
position: fixed !important;
5757
top: 0 !important;
5858
left: 0 !important;
59-
width: 100vw;
59+
width: 95vw;
6060
height: 100vh;
6161
background: rgba(255, 255, 255, 0.98);
6262
z-index: 9999;
6363
padding: 20px;
6464
overflow: auto;
65-
}
65+
}}
6666

67-
.mermaid-fullscreen-modal.dark-theme {
67+
.mermaid-fullscreen-modal.dark-theme {{
6868
background: rgba(0, 0, 0, 0.98);
69-
}
69+
}}
7070

71-
.mermaid-fullscreen-modal.active {
71+
.mermaid-fullscreen-modal.active {{
7272
display: flex;
7373
align-items: center;
7474
justify-content: center;
75-
}
75+
}}
7676

77-
.mermaid-fullscreen-content {
77+
.mermaid-container-fullscreen {{
7878
position: relative;
7979
width: 95vw;
8080
height: 90vh;
@@ -88,30 +88,28 @@
8888
display: flex;
8989
align-items: center;
9090
justify-content: center;
91-
}
91+
}}
9292

93-
.mermaid-fullscreen-content.dark-theme {
93+
.mermaid-container-fullscreen.dark-theme {{
9494
background: #1a1a1a;
9595
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
96-
}
96+
}}
9797

98-
.mermaid-fullscreen-content .mermaid {
98+
.mermaid-container-fullscreen pre.mermaid {{
9999
width: 100%;
100100
height: 100%;
101101
display: flex;
102102
align-items: center;
103103
justify-content: center;
104-
}
104+
}}
105105

106-
.mermaid-fullscreen-content .mermaid svg {
107-
width: 100%;
108-
height: auto;
109-
max-width: 100%;
110-
max-height: 85vh;
106+
.mermaid-container-fullscreen .mermaid svg {{
107+
height: 100% !important;
108+
width: 100% !important;
111109
cursor: grab;
112-
}
110+
}}
113111

114-
.mermaid-fullscreen-close {
112+
.mermaid-fullscreen-close {{
115113
position: fixed !important;
116114
top: 20px !important;
117115
right: 20px !important;
@@ -130,25 +128,25 @@
130128
font-size: 24px;
131129
line-height: 1;
132130
color: #333;
133-
}
131+
}}
134132

135-
.mermaid-fullscreen-close:hover {
133+
.mermaid-fullscreen-close:hover {{
136134
background: white;
137135
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
138136
transform: scale(1.1);
139-
}
137+
}}
140138

141-
.mermaid-fullscreen-close.dark-theme {
139+
.mermaid-fullscreen-close.dark-theme {{
142140
background: rgba(50, 50, 50, 0.95);
143141
border: 1px solid rgba(255, 255, 255, 0.2);
144142
color: #e0e0e0;
145-
}
143+
}}
146144

147-
.mermaid-fullscreen-close.dark-theme:hover {
145+
.mermaid-fullscreen-close.dark-theme:hover {{
148146
background: rgba(60, 60, 60, 1);
149147
box-shadow: 0 6px 16px rgba(255, 255, 255, 0.2);
150-
}
148+
}}
151149

152-
.mermaid-fullscreen-modal .mermaid-fullscreen-btn {
150+
.mermaid-fullscreen-modal .mermaid-fullscreen-btn {{
153151
display: none !important;
154-
}
152+
}}

0 commit comments

Comments
 (0)