KerimCETINBAS
Not : YP ile tasarlanmıştır.
EBNF notasyonunu UML ve railroad diagramlarına dönüştüren ve bunları bir HTML dosyasında gösteren bir örnek hazırlayabilirim. Aşağıda, hem UML diyagramını hem de railroad diyagramlarını içeren bir HTML dosyası bulunmaktadır.
Alalade bir örnek
<sentence> ::= <subject> <predicate> "."
<subject> ::= <noun_phrase>
<noun_phrase> ::= <article> <noun>
<article> ::= "the" | "a"
<noun> ::= "cat" | "dog"
<predicate> ::= <verb_phrase>
<verb_phrase> ::= <verb> <noun_phrase>
<verb> ::= "chased" | "saw"
HTML Kodu
Bu HTML dosyası, EBNF notasyonunu hem UML hem de railroad diagramları ile göstermektedir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EBNF Diagrams</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.diagram {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
}
.railroad-diagram {
font-family: "Courier New", Courier, monospace;
}
.railroad-diagram div {
white-space: pre;
font-size: 14px;
}
</style>
</head>
<body>
<h1>EBNF Diagrams</h1>
<h2>UML Diagram</h2>
<div class="diagram">
<svg width="800" height="400">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7"
refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" />
</marker>
</defs>
<!-- Sentence -->
<rect x="50" y="20" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="60" y="50">sentence</text>
<line x1="110" y1="70" x2="110" y2="120" stroke="black" marker-end="url(#arrowhead)"/>
<!-- Subject -->
<rect x="50" y="120" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="60" y="150">subject</text>
<line x1="110" y1="170" x2="110" y2="220" stroke="black" marker-end="url(#arrowhead)"/>
<!-- Noun Phrase -->
<rect x="50" y="220" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="60" y="250">noun_phrase</text>
<line x1="110" y1="270" x2="110" y2="320" stroke="black" marker-end="url(#arrowhead)"/>
<!-- Article -->
<rect x="50" y="320" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="60" y="350">article</text>
<line x1="110" y1="370" x2="110" y2="420" stroke="black" marker-end="url(#arrowhead)"/>
<!-- Articles "the" and "a" -->
<rect x="50" y="420" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="70" y="450">"the"</text>
<rect x="50" y="480" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="80" y="510">"a"</text>
<!-- Predicate -->
<rect x="200" y="20" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="210" y="50">predicate</text>
<line x1="260" y1="70" x2="260" y2="120" stroke="black" marker-end="url(#arrowhead)"/>
<!-- Verb Phrase -->
<rect x="200" y="120" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="210" y="150">verb_phrase</text>
<line x1="260" y1="170" x2="260" y2="220" stroke="black" marker-end="url(#arrowhead)"/>
<!-- Verb -->
<rect x="200" y="220" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="230" y="250">verb</text>
<line x1="260" y1="270" x2="260" y2="320" stroke="black" marker-end="url(#arrowhead)"/>
<!-- Verbs "chased" and "saw" -->
<rect x="200" y="320" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="230" y="350">"chased"</text>
<rect x="200" y="380" width="120" height="50" fill="lightblue" stroke="black"/>
<text x="240" y="410">"saw"</text>
<!-- Dashed lines to indicate optional or alternate paths -->
<line x1="170" y1="40" x2="290" y2="40" stroke="black" stroke-dasharray="5,5"/>
<line x1="170" y1="140" x2="290" y2="140" stroke="black" stroke-dasharray="5,5"/>
<line x1="170" y1="240" x2="290" y2="240" stroke="black" stroke-dasharray="5,5"/>
</svg>
</div>
<h2>Railroad Diagram</h2>
<div class="diagram railroad-diagram">
<div>
+-------------------------------+<br>
| |<br>
v |<br>
<subject> <predicate> "." |<br>
+-------------------------------+<br>
</div>
<div>
+-------------------+<br>
| |<br>
v |<br>
<noun_phrase> |<br>
+-------------------+<br>
</div>
<div>
+-------------------------------------+<br>
| |<br>
v |<br>
<article> <noun> |<br>
+-------------------------------------+<br>
</div>
<div>
+----------------------+
| |
v |
"the" | "a" |
+----------------------+
</div>
<div>
+----------------------+
| |
v |
"cat" | "dog" |
+----------------------+
</div>
<div>
+-------------------+
| |
v |
<verb_phrase> |
+-------------------+
</div>
<div>
+-------------------------------------+
| |
v |
<verb> <noun_phrase> |
+-------------------------------------+
</div>
<div>
+-------------------------+
| |
v |
"chased" | "saw" |
+-------------------------+
</div>
</div>
</body>
</html>