There is an Online Railroad Diagram Generator. It creates SVG syntax diagrams, also known as railroad diagrams, from context-free grammars specified in EBNF. You can copy the SVG code or take screen shots.
You have to type in the grammar and it’ll make the diagram.
For example, to create the first railroad diagram you show, you would use the code:
object ::= '{' ((string ':' value ) ( ',' string ':' value )*)? '}'
Then you could go on to define string and value using string ::= ... and value ::= ... The references are all shown.
Check out some of the example diagrams on the page. They have XML and even EBNF itself.