MediaWiki/Extension/DrawioEditor: Unterschied zwischen den Versionen

Aktuelle Version vom 31. Mai 2024, 12:34 Uhr

topic - Kurzbeschreibung

Beschreibung

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

Das Schlüsselwort "chart" hat eine besondere Bedeutung und steht für die tatsächliche Größe des Charts. Wenn das Diagramm gespeichert wird, werden die Bildabmessungen automatisch angepasst. Normalerweise ist es besser, chart anstelle eines festen Pixelwertes zu verwenden.

Standardmäßig wird das Diagramm skaliert (width=100% und height=auto), bis es seine tatsächliche, im Diagramm gespeicherte Breite erreicht (max-width=chart).

Wenn Sie eine größere oder kleinere Skalierung wünschen, können Sie max_width manuell anpassen. Verwenden Sie none, um eine unendliche Skalierung zu ermöglichen.

Wenn Sie nur eine feste Breite wünschen, setzen Sie width auf chart oder einen festen CSS-Wert und lassen height auf auto. Es sei denn, Sie benötigen einen Bildbereich mit fester Größe, bevor das Bild tatsächlich geladen wird, oder Sie müssen wirklich anhand der Höhe skalieren, dann macht es normalerweise keinen Sinn, height zu setzen. Wenn Sie es einstellen, sollten Sie wahrscheinlich width auf auto setzen, oder wenn Sie beides einstellen, verwenden Sie chart, damit Sie die Werte nicht jedes Mal manuell aktualisieren müssen, wenn sich Ihr Bild ändert.

Beispiele

Das Diagramm skalieren lassen, bis es seine tatsächliche Breite erreicht (Standard):

{{#drawio:ChartName}}

{{#drawio:ChartName|width=100%|max-width=chart|height=auto}}

Das Diagramm skalieren lassen, bis es 800 px breit ist:

{{#drawio:ChartName|max-width=800px}}

Das Diagramm unendlich skalieren lassen:

{{#drawio:ChartName|max-width=none}}

Feste Breite:

{{#drawio:ChartName|width=600px}}

Feste Breite unter Verwendung der tatsächlichen Diagrammbreite:

{{#drawio:ChartName|width=chart}}

Feste Höhe und Breite unter Verwendung der tatsächlichen Diagrammabmessungen:

{{#drawio:ChartName|width=chart|height=chart}}

Beispiel

Anhang

Siehe auch

MediaWiki/Extension/DrawioEditor

Sicherheit

Dokumentation

https://drawio-app.com/tutorials/

Links

Projekt

Weblinks

@@ Zeile 1: / Zeile 1: @@
 '''topic''' - Kurzbeschreibung
-== Beschreibung ==
+=== Beschreibung ===
+=== Ein Diagramm hinzufügen ===
+# Fügen Sie den folgenden Tag zu jeder Wiki-Seite hinzu, um ein draw.io-Diagramm einzufügen: <br><br><code><nowiki>{{#drawio:ChartName}}</nowiki></code> <br><br> 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 ===
 [[File:drawIO_01.png|mini|400px]]
+# 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.
-{{#drawio:DrawioEditor1|width=400px}}
+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.
-=== Add a chart ===
+=== Optionen ===
-# Add the following tag to any wiki page to insert a draw.io chart: <code><nowiki> {{#drawio:ChartName}} </nowiki></code>. <code>ChartName</code> must be unique and will be used as the basename for the backing file.
+Optionen werden an den Tag angehängt, getrennt durch <code>|</code>.
-# Save the wiki page
-# Since no chart exists at this point, a placeholder will be shown where you've put the drawio tag. Click on the Edit link at the top right of it.
-# Draw your chart, click Save to save and Exit to leave Edit mode.
-=== Edit a chart === <!--T:7-->
+;Beispiel
-</translate>
+ <nowiki> {{#drawio:ChartName|max-width=500px}} </nowiki>
-Each chart will have an Edit link at its top right.
-Click it to get back into the editor.
-Click Save to save and Exit to get out of the editor.
-If a wiki page has multiple charts, only one can be edited at the same time.
-<translate>
+==== Diagrammabmessungen ====
-=== View or revert to old versions === <!--T:8-->
+Während die Standardeinstellungen in den meisten Fällen gut sind, kann es notwendig sein, die Darstellung Ihres Diagramms zu steuern.
-</translate>
-On each save, a new version of the backing file will be added to the wiki file store.
-You can get there by clicking the chart while you're not editing.
-There you can look at and revert to old versions like with any file uploaded to the wiki.
-<translate>
+; Die folgenden Optionen können dafür verwendet werden:
-=== Options === <!--T:9-->
+* width: Legt die Breite des Diagramms fest. Standardwert ist ''100%''.
-</translate>
+* max-width: Legt die maximale Breite des Diagramms fest, wenn die Breite relativ ist. Standardmäßig auf ''chart''.
-Options are appended to the tag separated by <code>|</code>.
+* Höhe: Legt die Höhe des Diagramms fest. Standardmäßig auf ''auto''. Normalerweise nicht verwendet.
-For example:
- {{#drawio:ChartName|max-width=500px}}
+Diese Option nimmt zum Beispiel jeden absoluten CSS-Längenwert als Argument:
+* ''400px''
+* ''80%''
+* ''auto''
-<translate>
+Das Schlüsselwort "chart" hat eine besondere Bedeutung und steht für die tatsächliche Größe des Charts.
-=== Chart dimensions === <!--T:10-->
+Wenn das Diagramm gespeichert wird, werden die Bildabmessungen automatisch angepasst.
-</translate>
+Normalerweise ist es besser, ''chart'' anstelle eines festen Pixelwertes zu verwenden.
-While the defaults are good under most circumstances, it may be necessary to control how your chart is displayed.
-The following options can be used for that:
-* width: Sets the chart width. Defaults to <code>100%</code>.
+Standardmäßig wird das Diagramm skaliert (''width=100%'' und ''height=auto''), bis es seine tatsächliche, im Diagramm gespeicherte Breite erreicht (''max-width=chart'').
-* max-width: Set the maximum chart width if width is relative. Defaults to <code>chart</code>.
-* height: Sets the chart height. Defaults to <code>auto</code>. Usually not used.
-These option take any absolute CSS length value as argument, for example:
+Wenn Sie eine größere oder kleinere Skalierung wünschen, können Sie max_width manuell anpassen. Verwenden Sie ''none'', um eine unendliche Skalierung zu ermöglichen.
-* <code>400px</code>
+Wenn Sie nur eine feste Breite wünschen, setzen Sie ''width'' auf ''chart'' oder einen festen CSS-Wert und lassen ''height'' auf ''auto''. Es sei denn, Sie benötigen einen Bildbereich mit fester Größe, bevor das Bild tatsächlich geladen wird, oder Sie müssen wirklich anhand der Höhe skalieren, dann macht es normalerweise keinen Sinn, ''height'' zu setzen. Wenn Sie es einstellen, sollten Sie wahrscheinlich ''width'' auf ''auto'' setzen, oder wenn Sie beides einstellen, verwenden Sie ''chart'', damit Sie die Werte nicht jedes Mal manuell aktualisieren müssen, wenn sich Ihr Bild ändert.
-* <code>80%</code>
-* <code>auto</code>
-The keyword <code>chart</code> has a special meaning and stands for the actual size of the chart.
+;Beispiele
-When the chart is saved, the image dimensions are automatically adjusted.
-Usually it's preferable to use <code>chart</code> instead of a fixed pixel value.
-The default behaviour is the let the chart scale (<code>width=100%</code> and <code>height=auto</code>) until it reaches its actual width stored in the chart (<code>max-width=chart</code>).
+Das Diagramm skalieren lassen, bis es seine tatsächliche Breite erreicht (Standard):
+ <nowiki>{{#drawio:ChartName}}</nowiki>
-If you want it to scale further or less, you can adjust max_width manually.
+ <nowiki>{{#drawio:ChartName|width=100%|max-width=chart|height=auto}}</nowiki>
-Use <code>none</code> to allow infinite scaling.
-If you just want a fixed width, set ''width'' to <code>chart</code> or some fixed CSS value and leave ''height'' on <code>auto</code>.
+Das Diagramm skalieren lassen, bis es 800 px breit ist:
-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''.
+ <nowiki>{{#drawio:ChartName|max-width=800px}}</nowiki>
-If you set it you probably should set ''width'' to <code>auto</code>, or when setting both use <code>chart</code> 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):
+Das Diagramm unendlich skalieren lassen:
+ <nowiki>{{#drawio:ChartName|max-width=none}}</nowiki>
-  {{#drawio:ChartName}}
+Feste Breite:
+  <nowiki>{{#drawio:ChartName|width=600px}}</nowiki>
-Same as:
+Feste Breite unter Verwendung der tatsächlichen Diagrammbreite:
+ <nowiki>{{#drawio:ChartName|width=chart}}</nowiki>
-  {{#drawio:ChartName|width=100%|max-width=chart|height=auto}}
+Feste Höhe und Breite unter Verwendung der tatsächlichen Diagrammabmessungen:
+  <nowiki>{{#drawio:ChartName|width=chart|height=chart}}</nowiki>
-* Let the chart scale until it's 800 px wide:
+<noinclude>
- {{#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}}
+=== Beispiel ===
+{{#drawio:DrawioEditor1|width=chart}}
-<translate>
+{{#drawio:DrawioEditorTest1|width=500px}}
-<noinclude>
 == Anhang ==
@@ Zeile 102: / Zeile 83: @@
 ==== Sicherheit ====
 ==== Dokumentation ====
+# https://drawio-app.com/tutorials/
 ==== Links ====
@@ Zeile 110: / Zeile 92: @@
 ===== Weblinks =====
 </noinclude>
+[[Kategorie:MediaWiki/Anleitung]]
+[[Kategorie:MediaWiki/Extension]]