Å lage pene og forståelige Markdown-dokumenter på GitHub krever en god forståelse av både grunnleggende og avanserte Markdown-teknikker. Her er en omfattende guide til å bli en Markdown-ekspert og lage profesjonelle dokumenter:

# Hovedoverskrift
## Underoverskrift
### Tredje nivå overskrift

- Punkt 1
- Punkt 2
  - Underpunkt
* Punkt 3

1. Første punkt
2. Andre punkt

• Punkt 1
• Punkt 2
  • Underpunkt

• Punkt 3

1. Første punkt
2. Andre punkt

[Lenketekst](https://www.eksempel.no)
![Bildetekst](https://www.eksempel.no/bilde.jpg)

Lenketekst

`kodeeksempel`

kodeeksempel

```python
def eksempel():
    print("Hello, World!")

```python
def eksempel():
    print("Hello, World!")

| Kolonne 1 | Kolonne 2 |
|-----------|-----------|
| Rekkefølge 1 | Rekkefølge 2 |
| Rekkefølge 3 | Rekkefølge 4 |

- [x] Fullført oppgave
- [ ] Ufullført oppgave

• Fullført oppgave
• Ufullført oppgave

Ved å bruke Markdown-utvidelser som støttes av Typora eller GitHub, kan du lage diagrammer med mermaid eller andre verktøy.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Inline formel: $a^2 + b^2 = c^2$

Blokk formel:
$$
\int_{a}^{b} x^2 \, dx
$$

Inline formel: $a^2 + b^2 = c^2$

Blokk formel: $$ \int_{a}^{b} x^2 , dx $$

<details>
  <summary>Klikk for mer informasjon</summary>
  Skjult tekst som vises ved klikking.
</details>

:tada: :sparkles:

🎉 ✨

# Prosjektoversikt

Dette prosjektet handler om å utvikle en programvareløsning for IT-drift.

## Funksjoner

- [x] Brukerautentisering
- [ ] Datakryptering

## Kodeeksempel

```python
def main():
    print("Hello, World!")

graph TD;
    A[Start] --> B{Valg};
    B -->|Ja| C[Fortsett];
    B -->|Nei| D[Stopp];

Pythagoras' teorem: $a^2 + b^2 = c^2$

For mer informasjon, kontakt meg.

🎉 Prosjektet er i gang!

# Prosjektoversikt

Dette prosjektet handler om å utvikle en programvareløsning for IT-drift.

## Funksjoner

- [x] Brukerautentisering
- [ ] Datakryptering

## Kodeeksempel

```python
def main():
    print("Hello, World!")

graph TD;
    A[Start] --> B{Valg};
    B -->|Ja| C[Fortsett];
    B -->|Nei| D[Stopp];

Pythagoras' teorem: $a^2 + b^2 = c^2$

For mer informasjon, kontakt meg.

🎉 Prosjektet er i gang!

Ved å bruke disse teknikkene og eksemplene, kan du lage pene og forståelige Markdown-dokumenter som viser programmering, IT-drift, IT-sikkerhet, realfag og mer på GitHub. For ytterligere detaljer og spesifikke funksjoner, se Typora-dokumentasjonen for diagrammer med Markdown. GitHub Wiki har flere avanserte funksjoner som kan gjøre dokumentasjonen din enda mer imponerende. Her er noen spektakulære ting du kan gjøre:

Du kan legge til videoer ved å bruke HTML:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Mermaid kan lage mer komplekse diagrammer, som sekvensdiagrammer:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I am good, thanks!

PlantUML kan lage detaljerte UML-diagrammer:

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml

Bruk Markdown for grunnleggende tabeller og utvid med HTML og JavaScript for mer funksjonalitet.

Du kan legge til egendefinerte stiler og interaktive elementer med HTML og CSS direkte i Markdown-filer.

Du kan integrere JSON-data direkte i dokumentene dine og visualisere dem.

{
  "name": "GitHub",
  "type": "Platform"
}

Du kan legge til vektorgrafikk direkte i Markdown:

![SVG Image](path/to/image.svg)

Du kan legge til innebygde applikasjoner med iframes:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Ved å kombinere disse avanserte funksjonene kan du lage rik og interaktiv dokumentasjon i GitHub Wiki. For mer detaljer, sjekk ut Typora-dokumentasjonen for diagrammer med Markdown og HTMLMarkdown.

Det ser ut til at GitHub ikke klarer å tolke usecaseDiagram korrekt. For å sikre at diagrammet blir rendert riktig, kan du prøve å følge en mer standard syntaks og struktur. La oss prøve en enklere versjon uten spesifikke oppsettvariabler først.

usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)
    
    (Logge inn) .> (Søke) : <<inkluderer>>
    (Bestille) .> (Betale) : <<inkluderer>>

Forsikre deg om at du bruker riktig kodeblokk og at GitHub støtter Mermaid-diagrammer i din nåværende konfigurasjon. Hvis dette fortsatt ikke fungerer, kan du forsøke å bruke en enklere versjon uten <<inkluderer>>-elementene for å se om det gjør en forskjell.

usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)

Kontroller også at Markdown-filen er riktig formatert og at det ikke er noen skjulte formateringsfeil som kan hindre korrekt rendering. Det virker som det er en feil i måten GitHub Wiki tolker usecaseDiagram. La oss prøve en annen tilnærming med en klar struktur.

1. Sørg for å bruke riktig syntax:

   • Pass på at hele koden er inne i en enkel kodeblokk med tre backticks.

2. Prøv en enkel struktur uten kommentarer:

usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)

    (Logge inn) .> (Søke) : inkluderer
    (Bestille) .> (Betale) : inkluderer

sequenceDiagram
    participant Bruker
    participant System
    participant Database
    
    Bruker->>System: Logg inn
    System->>Database: Sjekk legitimasjon
    Database-->>System: Returner status
    System-->>Bruker: Vis resultat

classDiagram
    class Bruker {
      - int id
      - string navn
      + loggInn()
      + loggUt()
    }
    
    class System {
      - Database database
      + autentiser()
      + søk()
    }
    
    class Database {
      - string URL
      + query()
    }
    
    Bruker --> System: Bruker systemet
    System --> Database: Spørring

flowchart TD
    Start --> A[Autentiser bruker]
    A --> B{Autentisering vellykket?}
    B -->|Ja| C[Søk data]
    B -->|Nei| D[Vis feilmelding]
    C --> E[Vis resultater]
    D --> End[Slutt]
    E --> End

Ved å bruke disse strukturene kan du sikre at diagrammene dine er korrekte og lesbare. Hvis GitHub fortsatt har problemer med å tolke dem, kan det være en begrensning eller feil i GitHub's rendering av Mermaid-diagrammer. Sørg også for at du har riktig versjon av Mermaid aktivert på din GitHub-repo.

Jeg ser at din GitHub Wiki-side "Markdown Guide" inneholder mange gode eksempler på bruk av Markdown. La oss forbedre og optimalisere dine UML-diagrammer og andre elementer for å sikre korrekt rendering og optimal visuell presentasjon.

usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)
    
    (Logge inn) .> (Søke) : <<inkluderer>>
    (Bestille) .> (Betale) : <<inkluderer>>

sequenceDiagram
    participant Bruker
    participant System
    participant Database
    
    Bruker->>System: Logg inn
    System->>Database: Sjekk legitimasjon
    Database-->>System: Returner status
    System-->>Bruker: Vis resultat

classDiagram
    class Bruker {
      - int id
      - string navn
      + loggInn()
      + loggUt()
    }
    
    class System {
      - Database database
      + autentiser()
      + søk()
    }
    
    class Database {
      - string URL
      + query()
    }
    
    Bruker --> System: Bruker systemet
    System --> Database: Spørring

flowchart TD
    Start --> A[Autentiser bruker]
    A --> B{Autentisering vellykket?}
    B -->|Ja| C[Søk data]
    B -->|Nei| D[Vis feilmelding]
    C --> E[Vis resultater]
    D --> End[Slutt]
    E --> End

Disse diagrammene bør være i stand til å vises riktig i GitHub Wiki. Pass på å bruke riktig format med tre backticks før og etter diagrammene for å sikre at GitHub tolker dem som kodeblokker.

Du kan også eksperimentere med ulike typer UML-diagrammer ved å følge GitHub's guide til å lage diagrammer med Mermaid for å sikre korrekt syntaks og kompatibilitet.

Back Draw Diagrams With Markdown September 5, 2022 by typora.io Precondition Sequence Diagrams Sequence Diagrams Options Flowcharts Mermaid Sequence Diagrams Flowcharts Gantt Charts Class Diagrams State Diagrams Pie Charts Requirement Diagram Gitgraph Diagrams / Commit Flow C4 Diagrams (plantUML compatible) Mindmap Timeline Quadrant Chart Sankey diagrams ZenUML XY Chart Global Mermaid Options Overview Diagram Alignment Mermaid Theme Auto Numbering Flowchart Curve Gantt Padding Inline Mermaid Config Save-as / Copy on Diagrams Precondition Typora supports some Markdown extensions for diagrams, to use this feature, first please enable Diagrams in Preferences Panel → Markdown section.

When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagrams features are not supported when exporting markdown into other file formats in current version. Besides, you should also notice that diagrams is not supported by standard Markdown, CommonMark or GFM. Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.

Sequence Diagrams This feature uses js-sequence, which turns the following code block into a rendered diagram:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

js-sequence

For more details, please see this syntax explanation.

Sequence Diagrams Options You could change CSS variable --sequence-theme to set theme for sequence diagrams, supported value are simple (default) and hand. For example, add following CSS in Custom CSS, and you will get:

:root { --sequence-theme: hand } –sequence-theme: simple –sequence-theme: hand Screen Shot 2021-04-05 at 23.38.52 Screen Shot 2021-03-13 at 23.56.07 Flowcharts This feature uses flowchart.js, which turns the following code block into a rendered diagram:

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

flowchart

Mermaid Typora also has integration with mermaid, which supports sequence diagrams, flowcharts, Gantt charts, class and state diagrams, and pie charts.

Sequence Diagrams For more details see these instructions.

%% Example of sequence diagram
  sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
    Bob->>Alice: Not so good :(
    else is well
    Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
    Bob->>Alice: Thanks for asking
    end

mermaid-sequence

Flowcharts For more details see these instructions.

graph LR
A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

mermaid-flowchart

Gantt Charts For more details see these instructions.

%% Example with selection of syntaxes
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

mermaid-Gantt

Class Diagrams For more details see these instructions.

classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

class-diagram

State Diagrams For more details see these instructions.

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

state-diagram

Pie Charts

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150 

pie-chart

Requirement Diagram A Requirement diagram provides a visualization for requirements and their connections, to each other and other documented elements. The modeling specs follow those defined by SysML v1.6.

You can find details here.

requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

Screen Shot 2022-09-06 at 22.03.59

Gitgraph Diagrams / Commit Flow A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.

You can find details here.

gitGraph
       commit
       commit
       branch develop
       checkout develop
       commit
       commit
       checkout main
       merge develop
       commit
       commit

Screen Shot 2022-08-19 at 16.07.24

C4 Diagrams (plantUML compatible) Mermaid’s c4 diagram syntax is compatible with plantUML.

You can find details here.

Mindmap A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas.

You can find details here.

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Screenshot 2023-01-04 at 22.21.05

Timeline See https://mermaid.js.org/syntax/timeline.html for detail.

Screenshot 2023-05-10 at 22.46.25

Quadrant Chart See https://mermaid.js.org/syntax/quadrantChart.html for details.

Screenshot 2023-08-20 at 11.53.47

Sankey diagrams See https://mermaid.js.org/syntax/sankey.html for details.

Screenshot 2023-08-20 at 11.55.40

ZenUML See https://mermaid.js.org/syntax/zenuml.html for details.

Screenshot 2023-08-29 at 21.13.14

Please notice that zenuml is not first class diagram in mermaid, it may lack some features, like dark themes, etc.

XY Chart You can find more details here → https://mermaid.js.org/syntax/xyChart.html.

You can now draw charts like this:

Screenshot 2023-12-13 at 19.23.18

Global Mermaid Options Overview You can change Mermaid options by adding Custom CSS, supported options include:

:root { --mermaid-theme: default; /or base, dark, forest, neutral, night / --mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif; --mermaid-sequence-numbers: off; / or "on", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/ --mermaid-flowchart-curve: linear / or "basis", see https://github.com/typora/typora-issues/issues/1632*/; --mermaid--gantt-left-padding: 75; /* see https://github.com/typora/typora-issues/issues/1665*/ } Please note that if you export document with other themes than currently used one, some mermaid options will not be applied to exported HTML / PDF / Image. For example, if you currently use them Github, but while export to PDF, you set theme YYY for PDF export, and YYY.css defines --mermaid-sequence-numbers: on, then the --mermaid-sequence-numbers: on would not be applied to exported PDF.

Diagram Alignment You can add below custom CSS following Add Custom CSS to left align your diagram.

.md-diagram-panel-preview {text-align:left;} Mermaid Theme Added --mermaid-theme css variable to quickly define a mermaid theme that fits your theme, the value can be base, default, dark, forest, neutral, night (the one used in night theme), for example:

CSS Mermaid Demo :root {--mermaid-theme:dark;} Screen Shot 2020-12-05 at 17.08.46 :root {--mermaid-theme:neutral;} Screen Shot 2020-12-05 at 17.09.42 :root {--mermaid-theme:forest;} Screen Shot 2020-12-05 at 17.10.11 Auto Numbering Add --mermaid-sequence-numbers: on; in Custom CSS will enable auto numbering for sequence in mermaid:

–mermaid-sequence-numbers:off –mermaid-sequence-numbers:on Screen Shot 2021-04-05 at 23.08.37 Screen Shot 2021-04-05 at 23.20.31 Flowchart Curve Add --mermaid-flowchart-curve: basis to get other type of curves.

–mermaid-flowchart-curve: linear; –mermaid-flowchart-curve: basis –mermaid-flowchart-curve: natural; –mermaid-flowchart-curve: step; Screen Shot 2021-04-05 at 23.25.41 Screen Shot 2021-04-05 at 23.30.11 Screen Shot 2021-04-05 at 23.28.06 Screen Shot 2021-04-05 at 23.28.52 Gantt Padding –mermaid–gantt-left-padding:75 –mermaid–gantt-left-padding:200 Screen Shot 2021-04-05 at 23.33.31 Screen Shot 2021-04-05 at 23.33.00 Inline Mermaid Config You can add %%{init: [options]}%% in the first line of mermaid diagram to config mermaid details like below:

Screen Shot 2022-08-19 at 16.04.36

You can find full document on https://mermaid-js.github.io/mermaid/#/./directives.

Save-as / Copy on Diagrams You can right click on a diagram to save it as SVG, PNG or JPG files to your local disk.

Also, you can right click on a diagram to copy it in your clipboard.

Get Typora / Help Improve our documents

Jeg har sett på oppdateringene på din GitHub Wiki-side "Markdown Guide". Den ser bra ut, men her er noen optimaliseringer for UML-diagrammer med Mermaid.

usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)
    
    (Logge inn) .> (Søke) : <<inkluderer>>
    (Bestille) .> (Betale) : <<inkluderer>>

sequenceDiagram
    participant Bruker
    participant System
    participant Database
    
    Bruker->>System: Logg inn
    System->>Database: Sjekk legitimasjon
    Database-->>System: Returner status
    System-->>Bruker: Vis resultat

classDiagram
    class Bruker {
      - int id
      - string navn
      + loggInn()
      + loggUt()
    }
    
    class System {
      - Database database
      + autentiser()
      + søk()
    }
    
    class Database {
      - string URL
      + query()
    }
    
    Bruker --> System: Bruker systemet
    System --> Database: Spørring

flowchart TD
    Start --> A[Autentiser bruker]
    A --> B{Autentisering vellykket?}
    B -->|Ja| C[Søk data]
    B -->|Nei| D[Vis feilmelding]
    C --> E[Vis resultater]
    D --> End[Slutt]
    E --> End

Ved å bruke disse kodene sikrer du at diagrammene vises korrekt og profesjonelt på din Wiki-side.

Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.

Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.

The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.

While directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the option to define the set of configurations that you wish to allow diagram authors to override with directives.

Mermaid basically supports two types of configuration options to be overridden by directives.

1. General/Top Level configurations : These are the configurations that are available and applied to all the diagram. Some of the most important top-level configurations are:

   • theme
   • fontFamily
   • logLevel
   • securityLevel
   • startOnLoad
   • secure

2. Diagram-specific configurations : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves. For example, mirrorActors is a configuration that is specific to the SequenceDiagram and alters whether the actors are mirrored or not. So this config is available only for the SequenceDiagram type.

NOTE: Not all configuration options are listed here. To get hold of all the configuration options, please refer to the defaultConfig.ts in the source code.

We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon.

Now that we have defined the types of configurations that are available, we can learn how to declare directives. A directive always starts and ends with %% signs with directive text in between, like %% {directive_text} %%.

Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being init. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.

The following code snippet shows the structure of a directive:

%%{
  init: {
    "theme": "dark",
    "fontFamily": "monospace",
    "logLevel": "info",
    "flowchart": {
      "htmlLabels": true,
      "curve": "linear"
    },
    "sequence": {
      "mirrorActors": true
    }
  }
}%%

You can also define the directives in a single line, like this:

%%{init: { **insert configuration options here** } }%%

For example, the following code snippet:

%%{init: { "sequence": { "mirrorActors":false }}}%%

Notes: The JSON object that is passed as {argument} must be valid key value pairs and encased in quotation marks or it will be ignored. Valid Key Value pairs can be found in config.

Example with a simple graph:

%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
graph LR
A-->B

Here the directive declaration will set the logLevel to debug and the theme to dark for a rendered mermaid diagram, changing the appearance of the diagram itself.

Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that %%init%% and %%initialize%% directives will be grouped together after they are parsed.

%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
...

For example, parsing the above generates a single %%init%% JSON object below, combining the two directives and carrying over the last value given for loglevel:

{
  "logLevel": "fatal",
  "theme": "dark",
  "startOnLoad": true
}

This will then be sent to mermaid.initialize(...) for rendering.

Now that the concept of directives has been explained, let us see some more examples of directive usage:

The following code snippet changes theme to forest:

%%{init: { "theme": "forest" } }%%

Possible theme values are: default, base, dark, forest and neutral. Default Value is default.

Example:

%%{init: { "theme": "forest" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
  subgraph section
  B
  C
  end

The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:

%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%

Example:

%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
  subgraph section
  B
  C
  end

The following code snippet changes logLevel to 2:

%%{init: { "logLevel": 2 } }%%

Possible logLevel values are:

• 1 for debug,
• 2 for info
• 3 for warn
• 4 for error
• 5 for only fatal errors

Default Value is 5.

Example:

%%{init: { "logLevel": 2 } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
  subgraph section
  B
  C
  end

Some common flowchart configurations are:

• htmlLabels: true/false
• curve: linear/curve
• diagramPadding: number
• useMaxWidth: number

For a complete list of flowchart configurations, see defaultConfig.ts in the source code. Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs.

The following code snippet changes flowchart config:

%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%

Here we are overriding only the flowchart config, and not the general config, setting htmlLabels to true and curve to linear.

%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
graph TD
A(Forest) --> B[/Another/]
A --> C[End]
  subgraph section
  B
  C
  end

Some common sequence diagram configurations are:

• width: number
• height: number
• messageAlign: left, center, right
• mirrorActors: boolean
• useMaxWidth: boolean
• rightAngles: boolean
• showSequenceNumbers: boolean
• wrap: boolean

For a complete list of sequence diagram configurations, see defaultConfig.ts in the source code. Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs.

So, wrap by default has a value of false for sequence diagrams.

Let us see an example:

sequenceDiagram

Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool

Now let us enable wrap for sequence diagrams.

The following code snippet changes sequence diagram config for wrap to true:

%%{init: { "sequence": { "wrap": true} } }%%

By applying that snippet to the diagram above, wrap will be enabled:

%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
Alice->Bob: Good.
Bob->Alice: Cool

For å sikre at både koden og visualiseringen vises korrekt, sørg for at du har riktig struktur og bruker Markdown riktig. Her er en detaljert guide for å vise både koden og visualiseringen på din GitHub Wiki:

Viser både koden og visualiseringen.

Kode:

```mermaid
usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)
    
    (Logge inn) .> (Søke) : <<inkluderer>>
    (Bestille) .> (Betale) : <<inkluderer>>

```mermaid
usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)
    
    (Logge inn) .> (Søke) : <<inkluderer>>
    (Bestille) .> (Betale) : <<inkluderer>>

Viser både koden og visualiseringen.

Kode:

```mermaid
sequenceDiagram
    participant Bruker
    participant System
    participant Database
    
    Bruker->>System: Logg inn
    System->>Database: Sjekk legitimasjon
    Database-->>System: Returner status
    System-->>Bruker: Vis resultat

```mermaid
sequenceDiagram
    participant Bruker
    participant System
    participant Database
    
    Bruker->>System: Logg inn
    System->>Database: Sjekk legitimasjon
    Database-->>System: Returner status
    System-->>Bruker: Vis resultat

Viser både koden og visualiseringen.

Kode:

```mermaid
classDiagram
    class Bruker {
      - int id
      - string navn
      + loggInn()
      + loggUt()
    }
    
    class System {
      - Database database
      + autentiser()
      + søk()
    }
    
    class Database {
      - string URL
      + query()
    }
    
    Bruker --> System: Bruker systemet
    System --> Database: Spørring

```mermaid
classDiagram
    class Bruker {
      - int id
      - string navn
      + loggInn()
      + loggUt()
    }
    
    class System {
      - Database database
      + autentiser()
      + søk()
    }
    
    class Database {
      - string URL
      + query()
    }
    
    Bruker --> System: Bruker systemet
    System --> Database: Spørring

Viser både koden og visualiseringen.

Kode:

```mermaid
flowchart TD
    Start --> A[Autentiser bruker]
    A --> B{Autentisering vellykket?}
    B -->|Ja| C[Søk data]
    B -->|Nei| D[Vis feilmelding]
    C --> E[Vis resultater]
    D --> End[Slutt]
    E --> End

```mermaid
flowchart TD
    Start --> A[Autentiser bruker]
    A --> B{Autentisering vellykket?}
    B -->|Ja| C[Søk data]
    B -->|Nei| D[Vis feilmelding]
    C --> E[Vis resultater]
    D --> End[Slutt]
    E --> End

Forsikre deg om at hver kodeblokk er omgitt av tre backticks (```) både før og etter koden, og at "mermaid" er inkludert etter de første backticks for å aktivere Mermaid-rendering. Dette bør sikre at GitHub korrekt viser både koden og den visuelle representasjonen av diagrammene.

flowchart TD
    Start --> A[Autentiser bruker]
    A --> B{Autentisering vellykket?}
    B -->|Ja| C[Søk data]
    B -->|Nei| D[Vis feilmelding]
    C --> E[Vis resultater]
    D --> End[Slutt]
    E --> End

```mermaid
flowchart TD
    Start --> A[Autentiser bruker]
    A --> B{Autentisering vellykket?}
    B -->|Ja| C[Søk data]
    B -->|Nei| D[Vis feilmelding]
    C --> E[Vis resultater]
    D --> End[Slutt]
    E --> End


```mermaid
classDiagram
    class Bruker {
      - int id
      - string navn
      + loggInn()
      + loggUt()
    }
    
    class System {
      - Database database
      + autentiser()
      + søk()
    }
    
    class Database {
      - string URL
      + query()
    }
    
    Bruker --> System: Bruker systemet
    System --> Database: Spørring





```mermaid
classDiagram
    class Bruker {
      - int id
      - string navn
      + loggInn()
      + loggUt()
    }
    
    class System {
      - Database database
      + autentiser()
      + søk()
    }
    
    class Database {
      - string URL
      + query()
    }
    
    Bruker --> System: Bruker systemet
    System --> Database: Spørring









```mermaid
sequenceDiagram
    participant Bruker
    participant System
    participant Database
    
    Bruker->>System: Logg inn
    System->>Database: Sjekk legitimasjon
    Database-->>System: Returner status
    System-->>Bruker: Vis resultat






```mermaid
sequenceDiagram
    participant Bruker
    participant System
    participant Database
    
    Bruker->>System: Logg inn
    System->>Database: Sjekk legitimasjon
    Database-->>System: Returner status
    System-->>Bruker: Vis resultat




```mermaid
usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)
    
    (Logge inn) .> (Søke) : <<inkluderer>>
    (Bestille) .> (Betale) : <<inkluderer>>





```mermaid
usecaseDiagram
    actor Bruker
    Bruker --> (Logge inn)
    Bruker --> (Søke)
    Bruker --> (Bestille)
    Bruker --> (Betale)
    
    (Logge inn) .> (Søke) : <<inkluderer>>
    (Bestille) .> (Betale) : <<inkluderer>>