Diagram

Diagrams, e.g. flowchart and mindmap, are rendered using Mermaid.

Flowchart

Y
N
Begin
Input
Condition?
Do this
Do that
Output
End
<div class="mermaid">
flowchart LR
B --> I --> C --"Y"--> PY
C --"N"--> PN
PY & PN --> O --> E
B(["Begin"])
I[/"Input"/]
C{"Condition?"}
PY["Do this"]
PN["Do that"]
O[/"Output"/]
E["End"]
</div>

Mindmap

PhysicsMechanicsKinematicsDynamicsStaticsEnergyFluidHydrostaticsHydrodynamicsSurface tensionFieldElectromagnetismElectric fieldMagnetic FieldGravitation
<div class="mermaid">
mindmap
root((Physics))
  Mechanics
    Kinematics
    Dynamics
    Statics
    Energy
  Fluid
    Hydrostatics
    Hydrodynamics
    Surface tension
  Field
    Electromagnetism
      Electric field
      Magnetic Field
    Gravitation
</div>