PlantUMLLanguage specificationYaml Diagram

Display YAML Data
Edit in DokuwikiEdit in AsciidocEdit in Markdown

YAML format is widely used in software.

You can use PlantUML to visualize your data.

To activate this feature, the diagram must:
  • begin with @startyaml keyword
  • end with @endyaml keyword.

🎉 Copied! 
@startyaml
fruit: Apple
size: Large
color: Red
@endyaml

Complex example
Edit in DokuwikiEdit in AsciidocEdit in Markdown

🎉 Copied! 
@startyaml
doe: "a deer, a female deer"
ray: "a drop of golden sun"
pi: 3.14159
xmas: true
french-hens: 3
calling-birds: 
	- huey
	- dewey
	- louie
	- fred
xmas-fifth-day: 
	calling-birds: four
	french-hens: 3
	golden-rings: 5
	partridges: 
		count: 1
		location: "a pear tree"
	turtle-doves: two
@endyaml

Specific key (with symbols or unicode)
Edit in DokuwikiEdit in AsciidocEdit in Markdown

🎉 Copied! 
@startyaml
@fruit: Apple
$size: Large
&color: Red
❤: Heart
‰: Per mille
@endyaml

[Ref. QA-13376]

Highlight parts
Edit in DokuwikiEdit in AsciidocEdit in Markdown

Normal style

🎉 Copied! 
@startyaml
#highlight "french-hens"
#highlight "xmas-fifth-day" / "partridges"

doe: "a deer, a female deer"
ray: "a drop of golden sun"
pi: 3.14159
xmas: true
french-hens: 3
calling-birds: 
	- huey
	- dewey
	- louie
	- fred
xmas-fifth-day: 
	calling-birds: four
	french-hens: 3
	golden-rings: 5
	partridges: 
		count: 1
		location: "a pear tree"
	turtle-doves: two
@endyaml

Customised style

🎉 Copied! 
@startyaml
<style>
yamlDiagram {
    highlight {
      BackGroundColor red
      FontColor white
      FontStyle italic
    }
}
</style>
#highlight "french-hens"
#highlight "xmas-fifth-day" / "partridges"

doe: "a deer, a female deer"
ray: "a drop of golden sun"
pi: 3.14159
xmas: true
french-hens: 3
calling-birds: 
	- huey
	- dewey
	- louie
	- fred
xmas-fifth-day: 
	calling-birds: four
	french-hens: 3
	golden-rings: 5
	partridges: 
		count: 1
		location: "a pear tree"
	turtle-doves: two
@endyaml

[Ref. QA-13288]

Using (global) style
Edit in DokuwikiEdit in AsciidocEdit in Markdown

Without style (by default)

🎉 Copied! 
@startyaml
  -
    name: Mark McGwire
    hr:   65
    avg:  0.278
  -
    name: Sammy Sosa
    hr:   63
    avg:  0.288
@endyaml

With style

You can use style to change rendering of elements.

🎉 Copied! 
@startyaml
<style>
yamlDiagram {
  node {
    BackGroundColor lightblue
    LineColor lightblue
    FontName Helvetica
    FontColor red
    FontSize 18
    FontStyle bold
    BackGroundColor Khaki
    RoundCorner 0
    LineThickness 2
    LineStyle 10;5
    separator {
      LineThickness 0.5
      LineColor black
      LineStyle 1;5
    }
  }
  arrow {
    BackGroundColor lightblue
    LineColor green
    LineThickness 2
    LineStyle 2;5
  }
}
</style>
  -
    name: Mark McGwire
    hr:   65
    avg:  0.278
  -
    name: Sammy Sosa
    hr:   63
    avg:  0.288
@endyaml

[Ref. QA-13123]