{"id":270,"date":"2021-10-16T13:53:28","date_gmt":"2021-10-16T11:53:28","guid":{"rendered":"https:\/\/hornse.de\/wordpress\/?page_id=270"},"modified":"2022-06-14T23:48:07","modified_gmt":"2022-06-14T21:48:07","slug":"diagramme-fuer-den-informatik-unterricht","status":"publish","type":"page","link":"https:\/\/hornse.de\/wordpress\/?page_id=270","title":{"rendered":"Diagramme f\u00fcr den (Informatik-)Unterricht"},"content":{"rendered":"\n<p>Auf der Suche nach einer sch\u00f6nen und einfachen Visualisierungsm\u00f6glichkeit f\u00fcr unterschiedliche Diagramme im Informatikunterricht, bin ich durch Zufall nach meiner Markdown Fortbildung \u00fcber die WordPress-Plugins WPPlantUML und WPMermaid gestolpert.<\/p>\n\n\n\n<p>W\u00e4hrend das PlantUML Plugin leider nicht so richtig gut funktioniert hat, lief das Mermaid Plugin von Anfang an problemlos.<\/p>\n\n\n\n<p>Wer es einmal ausprobieren m\u00f6chte findet hier alle Informationen. Die unten stehenden Beispiele sind von dieser Seite \u00fcbernommen.<\/p>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\nclassDiagram\n      Animal &lt;|-- Duck\n      Animal &lt;|-- Fish\n      Animal &lt;|-- Zebra\n      Animal : +int age\n      Animal : +String gender\n      Animal: +isMammal()\n      Animal: +mate()\n      class Duck{\n          +String beakColor\n          +swim()\n          +quack()\n      }\n      class Fish{\n          -int sizeInFeet\n          -canEat()\n      }\n      class Zebra{\n          +bool is_wild\n          +run()\n      }\n\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Alice->>Bob: Hi Bob\n    Bob->>Alice: Hi Alice\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\nflowchart TD\n    A[Start] --> B{Is it?};\n    B -->|Yes| C[OK];\n    C --> D[Rethink];\n    D --> B;\n    B ---->|No| E[End];\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\nstateDiagram-v2\n    [*] --> First\n\n    state First {\n        [*] --> Second\n\n        state Second {\n            [*] --> second\n            second --> Third\n\n            state Third {\n                [*] --> third\n                third --> [*]\n            }\n        }\n    }\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\njourney\n    title My working day\n    section Go to work\n      Make tea: 5: Me\n      Go upstairs: 3: Me\n      Do work: 1: Me, Cat\n    section Go home\n      Go downstairs: 5: Me\n      Sit down: 5: Me\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\ngantt\n    dateFormat  YYYY-MM-DD\n    title       Adding GANTT diagram functionality to mermaid\n    excludes    weekends\n    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week (\"sunday\") or \"weekends\", but not the word \"weekdays\".)\n\n    section A section\n    Completed task            :done,    des1, 2014-01-06,2014-01-08\n    Active task               :active,  des2, 2014-01-09, 3d\n    Future task               :         des3, after des2, 5d\n    Future task2              :         des4, after des3, 5d\n\n    section Critical tasks\n    Completed task in the critical line :crit, done, 2014-01-06,24h\n    Implement parser and jison          :crit, done, after des1, 2d\n    Create tests for parser             :crit, active, 3d\n    Future task in critical line        :crit, 5d\n    Create tests for renderer           :2d\n    Add to mermaid                      :1d\n\n    section Documentation\n    Describe gantt syntax               :active, a1, after des1, 3d\n    Add gantt diagram to demo page      :after a1  , 20h\n    Add another diagram to demo page    :doc1, after a1  , 48h\n\n    section Last section\n    Describe gantt syntax               :after doc1, 3d\n    Add gantt diagram to demo page      :20h\n    Add another diagram to demo page    :48h\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\npie\n    title Key elements in Product X\n    \"Calcium\" : 42.96\n    \"Potassium\" : 50.05\n    \"Magnesium\" : 10.01\n    \"Iron\" :  5\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\ngraph TB\n    sq[Square shape] --> ci((Circle shape))\n\n    subgraph A\n        od>Odd shape]-- Two line&lt;br\/>edge comment --> ro\n        di{Diamond with &lt;br\/> line break} -.-> ro(Rounded&lt;br>square&lt;br>shape)\n        di==>ro2(Rounded square shape)\n    end\n\n    %% Notice that no text in shape are added here instead that is appended further down\n    e --> od3>Really long text with linebreak&lt;br>in an Odd shape]\n\n    %% Comments after double percent signs\n    e((Inner \/ circle&lt;br>and some odd &lt;br>special characters)) --> f(,.?!+-*\u0632)\n\n    cyr[Cyrillic]-->cyr2((Circle shape \u041d\u0430\u0447\u0430\u043b\u043e));\n\n     classDef green fill:#9f6,stroke:#333,stroke-width:2px;\n     classDef orange fill:#f96,stroke:#333,stroke-width:4px;\n     class sq,e green\n     class di orange\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-wp-mermaid-block mermaid\">\n\n\nsequenceDiagram\n    participant Alice\n    participant Bob\n    Alice->>John: Hello John, how are you?\n    loop Healthcheck\n        John->>John: Fight against hypochondria\n    end\n    Note right of John: Rational thoughts&lt;br\/>prevail...\n    John-->>Alice: Great!\n    John->>Bob: How about you?\n    Bob-->>John: Jolly good!\n\n\n<\/div>\n\n\n\n<p><strong>Struktogramme<\/strong><\/p>\n\n\n\n<p>In den Vorgaben des Zentralabiturs (ZA) in NRW sind f\u00fcr das Fach Informatik Struktogramme als Visualisierungsm\u00f6glichkeit vorgegeben. Die unterschiedlichen Tools und Seiten die ich gefunden habe, werden meistens nicht mehr gepflegt oder sind nur schlecht lauff\u00e4hig.<\/p>\n\n\n\n<p>Durch Zufall bin ich auf den Struktogrammeditor der Uni Dresden gestossen, der mir alles erm\u00f6glicht (und das auch noch datensparsam!) was ich f\u00fcr meinen Unterricht ben\u00f6tige.<\/p>\n\n\n\n<figure class=\"wp-block-embed\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/dditools.inf.tu-dresden.de\/dev\/struktog\/index.html\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Auf der Suche nach einer sch\u00f6nen und einfachen Visualisierungsm\u00f6glichkeit f\u00fcr unterschiedliche Diagramme im Informatikunterricht, bin ich durch Zufall nach meiner Markdown Fortbildung \u00fcber die WordPress-Plugins WPPlantUML und WPMermaid gestolpert. W\u00e4hrend das PlantUML Plugin leider nicht so richtig gut funktioniert hat, <a href=\"https:\/\/hornse.de\/wordpress\/?page_id=270\" class=\"more-link\">Mehr erfahren<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":61,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/270"}],"collection":[{"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=270"}],"version-history":[{"count":4,"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/270\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/270\/revisions\/278"}],"up":[{"embeddable":true,"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/61"}],"wp:attachment":[{"href":"https:\/\/hornse.de\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}