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
 
Twitter Delicious Facebook Digg Google Bookmarks E-mail LinkedIn Reddit StumbleUpon    
  • Download TWiki
TWiki logo Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2012 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.