You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
### Changed in 1.2.0
- Stabilized features introduced in previous releases for a more reliable
interactive diagram experience.
- Interactive diagrams now always fit and center themselves after rendering,
theme updates, and Reset View actions.
- Removed the `fitToContainer` option and its runtime update event; automatic
fitting is now the standard interactive behavior.
- Updated the English, Turkish, and Chinese documentation to describe automatic
fitting without a separate configuration option.
### Fixed in 1.2.0
- Restored the container-centered transform origin required by the fitting
calculation, fixing diagrams that were incorrectly scaled or positioned in
1.1.32.
- Fixed sluggish diagram dragging by accounting for the fitted base scale,
removing mousemove frame throttling, and stopping zoom transitions when a drag
begins.
|`gantt`| Customize date formatting or axis visibility when embedding project timelines. |
39
39
|`securityLevel`| Mermaid security mode passed through to `mermaid.initialize()`. Use the strictness level that matches your content policy. **Changed:** the default is now `'strict'`, which disables inline HTML inside diagrams. Use `'loose'` only when you fully trust all diagram sources. |
40
40
|`static`| When `true`, renders a plain SVG without the toolbar, zoom, pan, fullscreen, download, or keyboard controls. Theme updates continue to re-render the SVG. |
41
-
|`fitToContainer`| When `true`, scales each interactive diagram to fit the available width and height, then centers it after rendering. Defaults to `true`. |
42
41
43
42
Calling `createMermaidRenderer()` again with a new Mermaid config
44
43
**deep-merges** the config into the existing singleton (nested objects like
45
44
`flowchart` are merged rather than replaced) and dispatches a runtime update to
46
45
mounted diagrams.
47
46
48
-
## Fit and center diagrams
47
+
## Automatic fit and centering
49
48
50
-
`fitToContainer` is enabled by default and sizes each interactive diagram to the
51
-
largest scale that fits inside its `.diagram-wrapper`, preserving its aspect
52
-
ratio and centering it in both directions. Set it to `false` to keep the
53
-
unscaled 100% view.
49
+
Every interactive diagram is automatically sized to the largest scale that fits
50
+
inside its `.diagram-wrapper`, preserving its aspect ratio and centering it in
51
+
both directions.
54
52
55
-
```typescript
56
-
createMermaidRenderer({
57
-
fitToContainer: true,
58
-
});
59
-
```
60
-
61
-
This option is applied after every Mermaid render, including theme-driven
62
-
re-renders and runtime updates through another `createMermaidRenderer()` call.
63
-
It does not affect `static: true` diagrams. The toolbar's **Reset View** action
64
-
continues to restore the original 100% view so readers can return to the
65
-
unscaled diagram.
53
+
Fitting is applied after every Mermaid render, including theme-driven re-renders
54
+
and runtime updates. It does not affect `static: true` diagrams. The toolbar's
55
+
**Reset View** action restores the fitted and centered view.
|`gantt`| Proje zaman çizelgelerinde tarih biçimlendirme veya eksen görünürlüğünü özelleştirir. |
40
40
|`securityLevel`|`mermaid.initialize()` içine geçirilen Mermaid güvenlik modudur. **Değişiklik:** varsayılan artık `'strict'`; diyagramlardaki inline HTML devre dışı bırakılır. Yalnızca tüm diyagram kaynaklarına güveniyorsanız `'loose'` kullanın. |
41
41
|`static`|`true` olduğunda araç çubuğu, yakınlaştırma, sürükleme, tam ekran, indirme ve klavye kontrolleri olmayan düz bir SVG oluşturur. Tema güncellemeleri SVG'yi yeniden render etmeye devam eder. |
42
-
|`fitToContainer`|`true` olduğunda her etkileşimli diyagramı kullanılabilir genişlik ve yüksekliğe sığacak şekilde ölçekler, ardından render sonrasında ortalar. Varsayılanı `true` değeridir. |
43
42
44
43
`createMermaidRenderer()` yeni bir Mermaid config ile tekrar çağrıldığında
45
44
mevcut singleton config'i **derin birleştirilir** (iç içe nesneler `flowchart`
46
45
gibi replaced yerine merge edilir) ve mount edilmiş diyagramlara runtime update
47
46
gönderilir.
48
47
49
-
## Diyagramları kapsayıcıya sığdırma ve ortalama
48
+
## Otomatik sığdırma ve ortalama
50
49
51
-
`fitToContainer` varsayılan olarak etkindir ve her etkileşimli diyagramı en-boy
52
-
oranı korunarak `.diagram-wrapper` içine sığacak en büyük ölçekte render eder ve
53
-
her iki eksende ortalar. Ölçeklenmemiş %100 görünümünü korumak için `false`
54
-
olarak ayarlayın.
50
+
Her etkileşimli diyagram, en-boy oranı korunarak `.diagram-wrapper` içine
51
+
sığacak en büyük ölçekte otomatik olarak render edilir ve her iki eksende
52
+
ortalanır.
55
53
56
-
```typescript
57
-
createMermaidRenderer({
58
-
fitToContainer: true,
59
-
});
60
-
```
61
-
62
-
Bu seçenek, tema kaynaklı yeniden render işlemleri ve başka bir
63
-
`createMermaidRenderer()` çağrısıyla yapılan runtime güncellemeleri dahil her
64
-
Mermaid render işleminden sonra uygulanır. `static: true` diyagramları
65
-
etkilemez. Araç çubuğundaki **Görünümü sıfırla** işlemi, okuyucuların
66
-
ölçeklenmemiş diyagrama dönebilmesi için özgün %100 görünümünü geri yükler.
54
+
Sığdırma, tema kaynaklı yeniden render işlemleri ve runtime güncellemeleri dahil
55
+
her Mermaid render işleminden sonra uygulanır. `static: true` diyagramları
56
+
etkilemez. Araç çubuğundaki **Görünümü sıfırla** işlemi sığdırılmış ve
0 commit comments