Klassendiagramm interaktiv

Dieses Modul basiert auf einer Vorlage von Thomas Karp.

Das Modul einbinden

Um das Modul nutzen zu können, muss die Einbindung des Moduls über den Meta-Tag features erfolgen (siehe auch Abschnitt "Javascript"):

----
Features: klassendiagramm-interaktiv
----

Konfiguration vornehmen

dataconfig - Übergabe der Konfiguration im JSON Format, Reihenfolge beliebig

• zeigeDiagramm Legt fest, ob das bearbeitbare Klassendiagramm angezeigt wird (Standardwert: true).
• zeigeHinweise Legt fest, ob der Hinweistext zur Erläuterung der Elemente angezeigt wird (Standardwert: false).
• zeigeSvg Legt fest, ob eine SVG des Klassendiagramms mit Downloadlink angezeigt wird (Standardwert: false).
• zeigeDownloadSvg Legt fest, ob der Downloadbutton der SVG Grafik angezeigt wird (Standardwert: true).
• zeigeJavaCode Legt fest, ob der Java-Code angezeigt wird (Standardwert: false).
• zeigePythonCode Legt fest, ob der Python-Code angezeigt wird (Standardwert: false).
• zeigeOptionen Legt fest, ob Checkboxen zur Ein-/Ausblendung der Hinweise und des Java-/Python-Codes für den User angezeigt werden (Standardwert: false).
• klasse Übergibt alle Informationen zur Klasse (Name, Attribute über fields, Methoden über methods), außerdem, welches Feld für den Hinweistext ausgewählt ist (selected beinhaltet dabei den Namen und selectionType den Typ des Feldes (class, field, method)).

Beispiel mit Optionen, SVG und beiden Code-Arten (wie in den Tools)

<klassendiagramm-interaktiv dataconfig='
{
  "zeigeHinweise": true,
  "zeigeSvg": false,
  "zeigeJavaCode": true,
  "zeigePythonCode": true,
  "zeigeOptionen": true,
  "klasse": {
    "name": "Hund",
    "fields": [
      {
        "type": "Integer",
        "name": "alter"
      },
      {
        "visibility": "-",
        "type": "String",
        "name": "name"
      }
    ],
    "methods": [
      {
        "returnType": "",
        "name": "Hund",
        "parameters": [
          {
            "type": "String",
            "name": "name"
          }
        ]
      },
      {
        "returnType": "",
        "name": "essen",
        "parameters": [
          {
            "type": "Nahrung",
            "name": "futter"
          }
        ]
      },
      {
        "visibility": "-",
        "returnType": "Boolean",
        "name": "istBissig",
        "parameters": []
      }
    ],
    "selected": "Hund",
    "selectionType": "class"
  }
}
    '></klassendiagramm-interaktiv>

Beispiel nur SVG ohne Downloadbutton, damit kann das Tool zum rendern von Klassendiagrammen ohne Interaktivität genutzt werden

<klassendiagramm-interaktiv dataconfig='
{
  "zeigeDiagramm": false,
  "zeigeHinweise": false,
  "zeigeSvg": true,
  "zeigeDownloadSvg": false,
  "zeigeJavaCode": false,
  "zeigePythonCode": false,
  "zeigeOptionen": false,
  "klasse": {
    "name": "Hund",
    "fields": [
      {
        "type": "Integer",
        "name": "alter"
      },
      {
        "visibility": "-",
        "type": "String",
        "name": "name"
      }
    ],
    "methods": [
      {
        "returnType": "",
        "name": "Hund",
        "parameters": [
          {
            "type": "String",
            "name": "name"
          }
        ]
      },
      {
        "returnType": "",
        "name": "essen",
        "parameters": [
          {
            "type": "Nahrung",
            "name": "futter"
          }
        ]
      },
      {
        "visibility": "-",
        "returnType": "Boolean",
        "name": "istBissig",
        "parameters": []
      }
    ],
    "selected": "Hund",
    "selectionType": "class"
  }
}
    '></klassendiagramm-interaktiv>

Test Speicherung Server

<klassendiagramm-interaktiv dataconfig='
{
  "zeigeShare": true,
  "zeigeHinweise": true,
  "zeigeSvg": false,
  "zeigeJavaCode": true,
  "zeigePythonCode": true,
  "zeigeOptionen": true,
  "klasse": {
    "name": "Hund",
    "fields": [
      {
        "type": "Integer",
        "name": "alter"
      },
      {
        "visibility": "-",
        "type": "String",
        "name": "name"
      }
    ],
    "methods": [
      {
        "returnType": "",
        "name": "Hund",
        "parameters": [
          {
            "type": "String",
            "name": "name"
          }
        ]
      },
      {
        "returnType": "",
        "name": "essen",
        "parameters": [
          {
            "type": "Nahrung",
            "name": "futter"
          }
        ]
      },
      {
        "visibility": "-",
        "returnType": "Boolean",
        "name": "istBissig",
        "parameters": []
      }
    ],
    "selected": "Hund",
    "selectionType": "class"
  }
}
    '></klassendiagramm-interaktiv>