json.org에서 사용되는 철도 다이어그램 생성 도구 [닫기]


99

BNF 언어의 그래픽 표현 인 json.org철도 다이어그램 구문이 마음 에 듭니다 . 웅변 적으로 결과를 만들어 낼 수있는 도구를 찾지 못했습니다.

누구나 이러한 다이어그램을 생성하는 데 사용 된 도구를 식별 할 수 있습니까?

대체 텍스트

대체 텍스트

답변:


94

온라인 철도 다이어그램 생성기 . EBNF에 지정된 문맥없는 문법 에서 철도 다이어그램이라고도 하는 SVG 구문 다이어그램을 생성 합니다 . SVG 코드를 복사하거나 스크린 샷을 찍을 수 있습니다.

문법을 입력해야 다이어그램이 만들어집니다.

예를 들어 첫 번째 철도 다이어그램을 만들려면 다음 코드를 사용합니다.

object ::= '{' ((string ':' value ) ( ',' string ':' value )*)? '}'

여기에 이미지 설명 입력

그런 다음 계속해서 정의 string하고 value사용할 수 string ::= ...있으며 value ::= ...참조가 모두 표시됩니다.

페이지에서 몇 가지 예제 다이어그램을 확인하십시오. 그들은 XML과 심지어 EBNF 자체를 가지고 있습니다.


a) 스크린 샷 만들기 b) 페이지 소스에서 svg 소스를 복사하는 것 외에 그래픽을 자신의 문서로 가져 오는 방법에 대한 아이디어가 있습니까?
rudolfson

1
@rudolfson-직접 작성할 수 있고, 중심 논리는 그리 나쁘지 않으며 모든 코드를 볼 수 있습니다. 그런 다음 문서에 삽입하기 만하면됩니다. 나는 이것을 기반으로 WP 플러그인을 작성했습니다. -가장 어려운 부분은 그래픽을 멋지게 만드는 것입니다.
Peter Ajtai

2
여기에 언급 된 온라인 철도 다이어그램 생성기는 이제 생성 된 다이어그램의 PNG 버전이 포함 된 ZIP 파일을 제공합니다. 훌륭한 도구!
Sebastián Grignoli

2
webapp이 여기로 옮겨진 것 같습니다 : bottlecaps.de/rr
enrico.bacis 2013

감사합니다 @ enrico.bacis - 업데이트 링크
피터 Ajtai

50

Douglas Crockford
에서 Aleem B
까지 날짜 2009 년 4 월 28 일 화요일 오후 6:01
제목 Re : Railroad Diagrams on json.org

Visio로 그렸습니다. Creative Docs.NET도 잘 작동합니다.

-

Aleem B는 다음과 같이 썼습니다.

안녕 더글라스,

나는 당신이 거기에 내놓은 대부분의 것을 즐겁고 json.org의 철도 다이어그램도 다르지 않습니다. 나는 다이어그램을 거의 웅변 적으로 생성 할 수있는 도구를 찾으려고 노력했지만 운이 없었습니다.

json.org에서 사용되는 철도 다이어그램 생성 도구

BNF를 이러한 다이어그램으로 변환하는 데 사용한 도구가 있습니까? 아니면 손으로 제작 했습니까?

-알림


7
완성을 위해 : Tab Atkins Jr. 는 SVG를 사용하여 Javascript Railroad-diagram Generator 를 만들었습니다 . 특히 그가 원하는 시각적 매력을 가진 "JSON.org 모양"을 찾을 수 없었기 때문입니다.
Potherca 2012 년


8

며칠 전 비슷한 질문이있었습니다. 철도 다이어그램을 만드는 데 좋은 도구는 무엇입니까?

그 질문은 SQLite 구문 다이어그램의 철도 다이어그램이 어떻게 생성되었는지에 관한 것이 었습니다. 허용 대답은 다이어그램이 티클로 작성된 DSL을 사용하여 생성 된 것을 발견했다.

또 다른 답변 은 EBNL 문법에서 작동하는 다이어그램 생성기를 사용하라는 제안을 제공했습니다.


여기에 추가하기 위해 링크 된 Wikipedia 기사에도 도구 목록이 있습니다. 진정한 철도 다이어그램에는 화살표가 필요하지 않아야합니다. 해당 트랙을 이동하는 기차를 상상한다면 어떤 경로를 택할 수 있는지 명확해야합니다. 그리고 json.org 다이어그램은 너무 예쁘기 때문에 도구가 있는지 알아야합니다 =) 이미 이러한 링크를 보았지만 다른 사람들에게 도움이 될 수 있습니다.
aleemb

4

IBM의 철도 트랙 생성기가 잘 처리하는 것 중 하나는 기본값입니다. 나는 이것을 수행하는 다른 발전기를 보지 못했습니다.

예는

          ┌─────◀────┐┌(──«defaults»─)─┐                        
▶▶─COMMAND┴«argument»┴┼────────────────┼──────────────────────▶◀
                      │ ┌────◀─────┐   │                        
                      └(┴┬«option»┬┴┬─┬┘                        
                         └Help────┘ └)┘                         

4

나는 또한 이러한 구문 다이어그램 을 생성하는 데 사용되는 도구를 찾고 있었고 가능하면js library 하면 그래픽이 올 때까지 지루한 시간을 기다리지 않고 편집하고 표시 할 수 있도록했습니다.

나는 도구가 알고 거기는 하지만 난에서 발전기 말할 것 bottlecaps.de가 컬러 옵션으로 좋은 그래픽을 가지고 있습니다. 불행히도 나는 도구의 소스 코드를 얻을 수 없었습니다.

여기에있는 관련 질문에 대해서도 살펴 보았지만 오픈 소스로 얻을 수있는 다음과 같이 시도해 볼 수js library 있는 온라인 데모를 제공 했습니다 .




0

IBM이 BookMaster SGML 제품군의 일부로 이러한 다이어그램을 작성하는 도구를 가지고 있다는 것을 기억하는 것 같습니다. 철도 다이어그램은 종종 메인 프레임 문서에서 사용됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.