Image & Diagram Components

User Guide → Image & Diagram Components

Image & Diagram Components

The image components here provide convenient syntax & styling abstractions on top of raw HTML and Markdown images. Diagrams, in the form of inline PlantUML components are also supported.

Pictures

A pic component allows you to add captions below the image.

CODE:

<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
  MarkBind Logo
</pic>

<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" eager>
  MarkBind Logo
</pic>

OUTPUT:

Logo MarkBind Logo Logo MarkBind Logo

Options

Name Type Default Description
alt string This must be specified.
The alternative text of the image.
height string The height of the image in pixels.
src string This must be specified.
The URL of the image.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
width string The width of the image in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
eager boolean false The <pic> component lazy loads its images by default.
If you want to eagerly load the images, simply specify this attribute.
<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
  MarkBind Logo
</pic>
Logo MarkBind Logo

Thumbnails

A thumbnail component allows you to insert thumbnails using text, images, or icons.

CODE:

<thumbnail circle src="../../images/deer.jpg" size="100"/>
<thumbnail circle text=":book:" background="#dff5ff" size="100"/>
<thumbnail circle text="___CS___" background="#333" font-color="white" size="100"/>
<thumbnail circle text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>

<thumbnail src="../../images/deer.jpg" size="100"/>
<thumbnail text=":book:" background="#dff5ff" size="100"/>
<thumbnail text="___CS___" background="#333" font-color="white" size="100"/>
<thumbnail text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>

OUTPUT:

đź“– CS đź“– CS

Options

Name Type Default Description
alt string This must be specified if src is specified
The alternative text of the image.
background string Specifies the background color.
Accepts any valid CSS background property
border string Specifies the border thickness, type, and color.
Accepts any valid CSS border property
circle boolean false If this option is enabled, the thumbnail will be circle shaped instead of square
font-color string The color of the text, affects normal text and icons (but not emojis)
font-size string Text size, defaults to half of size, affects text, icons and emojis
size string 100 The size of the thumbnail in pixels
src string The URL of the image.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
text string The text to use in the thumbnail, icons, emojis and markdown are supported here

If both text and src are specified, src will take higher priority.

<thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>

Diagrams

You can use the PlantUML syntax to add diagrams.

Java and Graphviz must be installed to use this feature

  • Java 8 or later (required to run the PlantUML JAR executable)
  • Graphviz v2.38 or later (required to generate all diagrams)

CODE:

<puml width="300">
@startuml
alice -> bob ++ : hello
bob -> bob ++ : self call
bob -> bib ++  #005500 : hello
bob -> george ** : create
return done
return rc
bob -> george !! : delete
return success
@enduml
</puml>

OUTPUT:

Alternatively, a PlantUML diagram can be specified in a separate .puml file and inserted into a page using a <puml> tag.

CODE:

diagrams/sequence.puml:

@startuml
alice -> bob ++ : hello
bob -> bob ++ : self call
bob -> bib ++  #005500 : hello
bob -> george ** : create
return done
return rc
bob -> george !! : delete
return success
@enduml

in another file:

<puml src="diagrams/sequence.puml" width="300"></puml>

OUTPUT:

The full PlantUML syntax reference can be found at plantuml.com/guide

More examples


Options

Name Type Description
alt string The alternative text of the diagram.
height string The height of the diagram in pixels.
name string The name of the output file.
src string The URL of the diagram if your diagram is in another .puml file.
The URL can be specified as absolute or relative references. More info in: Intra-Site Links
width string The width of the diagram in pixels.
If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.
<puml width=300>
@startuml
alice -> bob ++ : hello
bob -> bob ++ : self call
@enduml
</puml>

Sequence Diagram:

Use Case Diagram:

Class Diagram:

Activity Diagram:

Component Diagram:

State Diagram:

Object Diagram:

Gantt Diagram:

Entity Relation Diagram:

Ditaa Diagram:

Archimate Diagram: