Diagrama Sintático
Diagrama Sintático - Diagrama de Sintaxe
apoie, apoie.org, componente, linguagem, sintaxe, diagrama sintático, diagram de sintaxe, programação, desenvolvimento
Sintaxes para facilitar aprendizagem e consulta. Elementos, Formas de percurso e Exemplos.
DiagramaSintatico.xml
Exemplo
<h4><a href="Ruby191.html#11">Ruby 1.9.1 - if</a></h4>
<img src="Ruby191If_Then_Rascunho.png" alt="Diagrama Sintático - Diagrama de Sintaxe Ruby191 if" title="Diagrama Sintático - Diagrama de Sintaxe Ruby191 if"/>
<h4><a href="Python3.html#5">Python 3.0 if_stmt</a></h4>
<img src="Python3if_stmt.png" alt="Diagrama Sintático - Diagrama de Sintaxe Python if_stmt" title="Diagrama Sintático - Diagrama de Sintaxe Python if_stmt"/>
Exemplo com legenda
<div style="float: left;">
<h4><a href="Ruby191.html#11">Ruby 1.9.1 - if</a></h4>
<img src="Ruby191If_Then_Borda.png" alt="Diagrama Sintático - Diagrama de Sintaxe Ruby191 if" title="Diagrama Sintático - Diagrama de Sintaxe Ruby191 if"/>
<h4><a href="Python3.html#5">Python 3.0 if_stmt</a></h4>
<img src="Python3if_stmt_Borda.png" alt="Diagrama Sintático - Diagrama de Sintaxe Python if_stmt" title="Diagrama Sintático - Diagrama de Sintaxe Python if_stmt"/>
</div>
<div style="float: left;">
<h3>Legenda</h3>
<ul>
<li style="white-space: nowrap;"><img src="DSBordaInicio.png"/> Início válido</li>
<li style="white-space: nowrap;"><img src="DSBordaSequencia.png"/> Sequência</li>
<li style="white-space: nowrap;"><img src="DSBordaAlternativa.png"/> Alternativa</li>
<li style="white-space: nowrap;"><img src="DSBordaRepeticao.png"/> Repetição</li>
<li style="white-space: nowrap;"><img src="DSBordaFim.png"/> Final válido</li>
<li style="white-space: nowrap;"><img src="DSBordaExatamenteOQueEstaEscrito.png"/> Exatamente o que está escrito dentro</li>
<li style="white-space: nowrap;"><img src="DSBordaDefinidoEmOutroLugar.png"/> Definido em outro lugar</li>
</ul>
</div>
Formas de percurso
<table style="border: 0;">
<tr>
<td><img src="Diagrama_Sintatico_Sequencia.png"/></td>
<td style="vertical-align: middle;"><strong>Sequência</strong></td>
</tr>
<tr>
<td><img src="Diagrama_Sintatico_Alternativa.png"/></td>
<td style="vertical-align: middle;"><strong>Alternativa</strong></td>
</tr>
<tr>
<td><img src="Diagrama_Sintatico_Repeticao.png"/></td>
<td style="vertical-align: middle;"><strong>Repetição</strong></td>
</tr>
</table>
<strong>Percurso válido</strong>: de seta inicial até um final válido. Seta inicial não tem elemento anterior.
Definição dos elementos
Diagramas Sintáticos - desenhos utilizados:
<table style="border: 0;">
<tr>
<td><img src="DiagramaSintaticoArredondado.png"/></td>
<td>Arredondado - Exatamente o que está escrito</td>
</tr>
<tr>
<td><img src="DiagramaSintaticoElemDefOutroLugar.png"/></td>
<td>Retangular - Definido em outro lugar</td>
</tr>
<tr>
<td><img src="DiagramaSintaticoSeta.png"/></td>
<td>Seta - indica a sequência possível</td>
</tr>
<tr>
<td><img src="DSAlvoFinal.png"/></td>
<td>Alvo - final válido</td>
</tr>
<tr>
<td><img src="enter.jpg"/></td>
<td>Nova Linha</td>
</tr>
<tr>
<td><img src="RecuoAumentar.png"/></td>
<td>Aumentar recuo</td>
</tr>
<tr>
<td><img src="RecuoDiminuir.png"/></td>
<td>Diminuir recuo</td>
</tr>
</table>
Observações
<ul>
<li>Um elemento de um Diagrama Sintático - Diagrama de Sintaxe pode ser
uma expressão regular</li>
<li>Quando todos os elementos de um conjunto devem aparecer independente da ordem usamos uma lista não ordenada</li>
</ul>
<br>
Desenhado com auxílio de <a href="Bnf2Ds.html" target="_blank">componente BNF -> Diagrama Sintático</a>.
Outros exemplos
<table>
<tbody>
<tr>
<td > <a href="Bnf2Ds.html">Diagrama Sintático gerado a partir de BNF</a>.<br>
<h3>Exemplos:</h3>
<table border="1" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center;"> <b>CSV</b> </td>
</tr>
<tr>
<td>csv = NomeColuna {";" NomeColuna}
(NovaLinha valores)+.<br>
valores = dado {";" dado}.<br>
<br>
<hr style="width: 100%; height: 2px;"> <img src="CSVDiagramaSintatico.png"><br>
<div style="text-align: center;"> <br>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<table border="1" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center;"> <b>XML</b> </td>
</tr>
<tr>
<td> XML = "<" tag ">" [ XML+ |
dado ]
"</" tag ">" .<br>
<hr style="width: 100%; height: 2px;"><img src="XMLDiagramaSintatico.png" style="height: 160px; width: 550px;"> </td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: top;" class="relacionamento">
<h3>Diagramas Sintáticos - Diagramas de Sintaxe</h3>
<ul>
<li><a href="Python3.html">Python3.0</a></li>
<li><a href="Shell.html">Shell</a></li>
<li><a href="Javascript.html">Javascript</a></li>
<li><a href="Ldc.html">LDC</a></li>
<li><a href="Lua.html">Lua</a></li>
<li><a href="LazyBnf.html">LazyBNF</a></li>
<li><a href="Xml.html">XML</a></li>
</ul>
<br>
<h3><a href="DiagramaSintatico.html">Convenções</a></h3>
<ul>
<li>Elementos</li>
<li>Formas de percurso </li>
<li>Exemplo</li>
</ul>
</td>
</tr>
</tbody>
</table>