MediaWiki/Extension/DrawioEditor: Unterschied zwischen den Versionen
Zeile 31: | Zeile 31: | ||
<nowiki> {{#drawio:ChartName|max-width=500px}} </nowiki> | <nowiki> {{#drawio:ChartName|max-width=500px}} </nowiki> | ||
=== | === Diagrammabmessungen === | ||
Während die Standardeinstellungen in den meisten Fällen gut sind, kann es notwendig sein, die Darstellung Ihres Diagramms zu steuern. | |||
Die folgenden Optionen können dafür verwendet werden: | |||
* width: | * width: Legt die Breite des Diagramms fest. Standardwert ist <code>100%</code>. | ||
* max-width: | * max-width: Legt die maximale Breite des Diagramms fest, wenn die Breite relativ ist. Standardmäßig auf <code>chart</code>. | ||
* | * Höhe: Legt die Höhe des Diagramms fest. Standardmäßig auf <code>auto</code>. Normalerweise nicht verwendet. | ||
Diese Option nimmt zum Beispiel jeden absoluten CSS-Längenwert als Argument: | |||
* <code>400px</code> | * <code>400px</code> | ||
* <code>80%</code> | * <code>80%</code> |
Version vom 18. Mai 2023, 09:48 Uhr
topic - Kurzbeschreibung
Beschreibung
{{#drawio:DrawioEditor1|width=400px}}
Ein Diagramm hinzufügen
- Fügen Sie den folgenden Tag zu jeder Wiki-Seite hinzu, um ein draw.io-Diagramm einzufügen:
{{#drawio:ChartName}}
Der ChartName muss eindeutig sein und wird als Basisname für die Sicherungsdatei verwendet. - Speichern Sie die Wikiseite.
- Da zu diesem Zeitpunkt noch kein Diagramm existiert, wird ein Platzhalter an der Stelle angezeigt, an der Sie das Drawio-Tag gesetzt haben.
- Klicken Sie auf den Link Editieren oben rechts in diesem Platzhalter.
- Zeichnen Sie Ihr Diagramm, klicken Sie auf Speichern, um zu speichern und auf Beenden, um den Bearbeitungsmodus zu verlassen.
Ein Diagramm bearbeiten
- Jedes Diagramm hat oben rechts einen Link "Bearbeiten".
- Klicken Sie darauf, um wieder in den Editor zu gelangen.
- Klicken Sie auf Speichern, um zu speichern, und auf Beenden, um den Editor zu verlassen.
Wenn eine Wikiseite mehrere Diagramme hat, kann nur eines gleichzeitig bearbeitet werden.
Alte Versionen anzeigen oder wiederherstellen
- Bei jedem Speichern wird eine neue Version der Sicherungsdatei zum Wiki-Dateispeicher hinzugefügt.
- Sie gelangen dorthin, indem Sie auf das Diagramm klicken, wenn Sie gerade nicht bearbeiten.
- Dort können Sie wie bei jeder ins Wiki hochgeladenen Datei alte Versionen ansehen oder zu ihnen zurückkehren.
Optionen
Optionen werden an den Tag angehängt, getrennt durch |
.
- Beispiel
{{#drawio:ChartName|max-width=500px}}
Diagrammabmessungen
Während die Standardeinstellungen in den meisten Fällen gut sind, kann es notwendig sein, die Darstellung Ihres Diagramms zu steuern. Die folgenden Optionen können dafür verwendet werden:
- width: Legt die Breite des Diagramms fest. Standardwert ist
100%
. - max-width: Legt die maximale Breite des Diagramms fest, wenn die Breite relativ ist. Standardmäßig auf
chart
. - Höhe: Legt die Höhe des Diagramms fest. Standardmäßig auf
auto
. Normalerweise nicht verwendet.
Diese Option nimmt zum Beispiel jeden absoluten CSS-Längenwert als Argument:
400px
80%
auto
The keyword chart
has a special meaning and stands for the actual size of the chart.
When the chart is saved, the image dimensions are automatically adjusted.
Usually it's preferable to use chart
instead of a fixed pixel value.
The default behaviour is the let the chart scale (width=100%
and height=auto
) until it reaches its actual width stored in the chart (max-width=chart
).
If you want it to scale further or less, you can adjust max_width manually.
Use none
to allow infinite scaling.
If you just want a fixed width, set width to chart
or some fixed CSS value and leave height on auto
.
Unless you need a fixed sized image area before the image is actually loaded or really need to scale based on height, there is usually no point in setting height.
If you set it you probably should set width to auto
, or when setting both use chart
so you don't need to update the values manually every time your image changes.
- Examples
- Let the chart scale until it reaches its actual width (default):
{{#drawio:ChartName}}
Same as:
{{#drawio:ChartName|width=100%|max-width=chart|height=auto}}
- Let the chart scale until it's 800 px wide:
{{#drawio:ChartName|max-width=800px}}
- Let the chart scale infinitely:
{{#drawio:ChartName|max-width=none}}
- Fixed width:
{{#drawio:ChartName|width=600px}}
- Fixed width using the actual chart width:
{{#drawio:ChartName|width=chart}}
- Fixed height and width using the actual chart dimensions:
{{#drawio:ChartName|width=chart|height=chart}}