Tags:
create new tag
, view all tags

Flowchart Plugin

Crie fluxogramas a partir de conteúdo textual do tópico.


Exemplo

Fuxograma de Exemplo
Pare o mouse sobre cada item e veja a etiqueta com o nome em tamanho maior.
Cada item também é um link para o bloco de texto que o criou e onde podem existir mais detalhes sobre o passo.

The Based SVG
O exemplo acima foi gerado pelo conteúdo do tópico FlowchartPluginExample

In the text to define the itens of the Flowchart you must to write by this way for each item:

---++ Item do Fluxograma
   * Id: nome_unico
   * Type: Question
   * Yes: item_A
   * No: item_B
Para um exemplo mais completo, veja: FlowchartPlugin Example

Regras de Sintaxe

Para criar e apresentar o fluxograma adicione a variável %FLOWCHART% ou %FLOWCHART{Parâmetros}%.

O plugin coleta o conteúdo do texto e considera que cada título de segundo nível ---++ indica o início da definição de um novo item do fluxograma. Para especificar o item e a ação derivada espera-se uma lista do tipo * Atributo: Valor

Atributos Comentário
Type Tipo da unidade do fluxograma. Padrão: Action
Id Identificador para o Goto. Precisa validar com /[_a-zA-Z0-9]*/
Color Cor diferenciada para o item
Goto Indica para que item o fluxo deve seguir. Padrão: Next
Yes O mesmo que Goto, mas é obrigatório para Type: Question
No O mesmo que Goto, mas é obrigatório para Type: Question
Os tipos validos são:
Type Comentário
Start Indica o inicio de um fluxograma. Deve ser colocado no seu primeiro item
Action O tipo padrão. Apenas indica uma ação
Question Abre uma bifurcação no fluxo. Obriga a definição dos atributos Yes e No
End Indica o fim do fluxograma (ou parte dele)
End-Error Fim diferenciado para o caso de erro

Para controlar o início e fim de de títulos válidos para a construção do Fluxograma use %FLOWCHART_START% e %FLOWCHART_STOP%.

Se um nome for grande demais para o espaço do item a quebra de linha pode ser feita com %FLOWCHART_BR%, que não interfere no texto da página, apenas no fluxograma.

Para personalizar um fluxograma, basta adicionar parametros a variável: %FLOWCHART{Parametros}%
Os parametros válidos são:

Parâmetro Comentário
item-w Largura do item do fluxograma
item-h Altura do item do fluxograma
area-w Largura da área do item do fluxograma
area-h Altura da área do item do fluxograma
percent Porcentagem do tamanho PNG apresentado em relação ao padrão do SVG gerado
text-size Tamanho em pixels da fonte do texto
tag-style Estilo para a tag img

Dicas

IDEA! Os navegadores normalmente fazem cache da página web e dos elementos contidos nela (imagens, animações, sons...). É possível que após salvar a modificação na definição do fluxograma você não veja o efeito da modificação na imagem. Nesse caso clique "Atualizar" no seu navegador web.

IDEA! Alguns fluxogramas podem se tornar demasiadamente complexos e será difícil acompanhar suas linhas. Nesse caso aumente a área dos itens, dando assim maior espaçamento entre eles. eg: %FLOWCHART{ area-w="220" area-h="100" }%

Construção do Fluxograma e funcionamento do plugin

  1. Os blocos iniciados por título de segundo nível ---++ são lidos como definição de item do Fluxograma (como o plugin de slides).
  2. Um SVG é criado com essa informação e anexado ao tópico. Esse arquivo SVG pode ser acessado por %ATTACHURL%/flowchart_%TOPIC%.svg.
  3. Um PNG é gerado com o ImageMagick e reduzido, para que a imagem tenha uma boa suavização de serrilhado, que não se consegue na conversão direta. O PNG é anexado ao tópico e pode ser acessado por %ATTACHURL%/flowchart_%TOPIC%.png (aproveite isto para separar a imagem do fluxograma do tópico de definição quando for interessante).
  4. É criado um mapa para a imagem lincando os itens do fluxograma a origem da sua informação onde podem existir mais dados para implementação. Um arquivo txt com o mapa é anexado ao tópico e pode ser acessado por %ATTACHURL%/flowchartMapImg_%TOPIC%.txt (use para mapear a imagem mesmo fora do tópico onde o fluxograma foi gerado).
    %INCLUDE{"%PUBURL%/Web/TopicoDoFluxograma/flowchartMapImg_TopicoDoFluxograma.txt"}%
    <img src="%PUBURL%/Web/TopicoDoFluxograma/flowchart_TopicoDoFluxograma.png" usemap="flowchart_TopicoDoFluxograma" alt="Fuxograma" border="0" />
  5. O conteúdo do arquivo de mapa e uma tag de imagem apresentando o PNG são colocados no lugar da variável %FLOWCHART%.

Os arquivos (SVG, PNG e Map) são gerados quando o tópico contendo %FLOWCHART% é salvo.

Configurações do Plugin

As configurações do plugin são armazenadas como variáveis de preferências. Para referenciar uma configuração de plugin escreva: %<plugin>_<configuração>%, e.g. %INTERWIKIPLUGIN_SHORTDESCRIPTION%

  • Descrição em uma linha, é mostrada no tópico TextFormattingRules:
    • Set SHORTDESCRIPTION = Monta fluxograma a partir de informação do tópico

  • Largura padrão do item do fluxograma
    • Set ITEM_WIDTH = 140
  • Altura padrão do item do fluxograma
    • Set ITEM_HEIGHT = 40
  • Largura padrão da área do item do fluxograma
    • Set ITEM_AREA_W = 180
  • Altura padrão da área do item do fluxograma
    • Set ITEM_AREA_H = 70
  • Tamanho padrão em pixels do texto
    • Set TEXT_SIZE = 17
  • Porcentagem padrão do tamanho PNG apresentado em relação ao padrão do SVG gerado
    • Set PERCENT_IMG = 70
  • Estilo padrão para a tag img
    • Set TAG_STYLE = border:1px dotted #505050;

  • Debug plugin: (See output in data/debug.txt)
    • Set DEBUG = 0

Instruções de Instalação do Plugin

Para istruções sobre instalação veja: TWiki:Plugins.FlowchartPlugin#InstallationInstructions

Informações do Plugin

-- AurelioAHeckert - 28 Jun 2005

Topic revision: r1 - 2005-06-28 - AurelioAHeckert
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.